<!DOCTYPE html>
<!--[if lt IE 7 ]> <html class="ie6"> <![endif]-->
<!--[if IE 7 ]>    <html class="ie7"> <![endif]-->
<!--[if IE 8 ]>    <html class="ie8"> <![endif]-->
<!--[if IE 9 ]>    <html class="ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!-->
<html>
<!--<![endif]-->

<head>
<meta charset="utf-8">
<title>Boo Admin - Boo Table</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="description" content="">
<meta name="author" content="">

<!-- Le styles -->
<link href="assets/css/lib/bootstrap.css" rel="stylesheet">
<link href="assets/css/lib/bootstrap-responsive.css" rel="stylesheet">
<link href="assets/css/extension.css" rel="stylesheet">
<link href="assets/css/boo.css" rel="stylesheet">
<link href="assets/css/style.css" rel="stylesheet">
<link href="assets/css/boo-coloring.css" rel="stylesheet">
<link href="assets/css/boo-utility.css" rel="stylesheet">

<!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
	<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <script src="assets/plugins/selectivizr/selectivizr-min.js"></script>
    <script src="assets/plugins/flot/excanvas.min.js"></script>
<![endif]-->

<!-- Le fav and touch icons -->
<link rel="shortcut icon" href="assets/ico/favicon.ico">
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="assets/ico/apple-touch-icon-144-precomposed.html">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="assets/ico/apple-touch-icon-114-precomposed.html">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="assets/ico/apple-touch-icon-72-precomposed.html">
<link rel="apple-touch-icon-precomposed" href="assets/ico/apple-touch-icon-57-precomposed.html">
</head>

<body class="sidebar-left panel-side">
<div class="page-container">
    <div id="header-container">
        <div id="header">
            <div class="navbar navbar-inverse navbar-fixed-top">
                <div class="navbar-inner">
                    <div class="container-fluid">
                        <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>
                        <a class="brand" href="javascript:void(0);"><img src="assets/img/demo/logo-brand.png"></a>
                        <div class="search-global">
                            <input id="globalSearch" class="search search-query input-medium" type="search">
                            <a class="search-button" href="javascript:void(0);"><i class="fontello-icon-search-5"></i></a> </div>
                        <div class="nav-collapse collapse">
                            <ul class="nav user-menu visible-desktop">
                                <li><a class="btn-glyph fontello-icon-edit tip-bc" href="javascript:void(0);" title="Messages"><span class="badge badge-important">8</span></a></li>
                                <li><a class="btn-glyph fontello-icon-mail-1 tip-bc" href="javascript:void(0);" title="Emails"></a></li>
                                <li><a class="btn-glyph fontello-icon-lifebuoy tip-bc" href="javascript:void(0);" title="Support"><span class="badge badge-important">4</span></a></li>
                            </ul>
                            <ul class="nav">
                                <li> <a href="dashboard-one.html">Dashboard</a> </li>
                                <li class="active"> <a href="javascript:void(0);">Components</a> </li>
                                <li> <a href="component-fullcalendar-demo.html"><span class="fontello-icon-calendar"></span>Calendar</a> </li>
                                <li> <a href="javascript:void(0);"><span class="fontello-icon-users"></span>Contacts</a> </li>
                                <li class="dropdown"> <a href="javascript:void(0);" class="dropdown-toggle" data-toggle="dropdown"><span class="fontello-icon-list-1"></span>Customize <b class="caret"></b></a>
                                    <ul class="dropdown-menu">
                                        <li><a href="component-form-demo.html">Demo Form</a></li>
                                        <li><a href="component-widgets-remember.html">Remember</a></li>
                                        <li><a href="component-widgets-users.html">User List</a></li>
                                        <li class="divider"></li>
                                        <li class="nav-header">Next Update</li>
                                        <li><a href="javascript:void(0);">Contacts</a></li>
                                        <li><a href="javascript:void(0);">Email</a></li>
                                    </ul>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
            <!-- // navbar -->
            
            <div class="header-drawer">
                <div class="mobile-nav text-center visible-phone"> <a href="javascript:void(0);" class="mobile-btn" data-toggle="collapse" data-target=".sidebar"><i class="aweso-icon-chevron-down"></i> Components</a> </div>
                <!-- // Resposive navigation -->
                <div class="breadcrumbs-nav hidden-phone">
                    <ul id="breadcrumbs" class="breadcrumb">
                        <li><a href="javascript:void(0);"><i class="fontello-icon-home f12"></i> Dashboard</a> <span class="divider">/</span></li>
                        <li class="dropdown"><a href="javascript:void(0);">Table </a> <span class="divider">/</span>
                            <ul class="dropdown-menu">
                                <li><a href="javascript:void(0);">Table</a></li>
                                <li><a href="javascript:void(0);">Elements</a></li>
                                <li><a href="javascript:void(0);">Elements</a></li>
                                <li><a href="javascript:void(0);">Elements</a></li>
                            </ul>
                        </li>
                        <li class="active">Boo Admin </li>
                    </ul>
                </div>
                <!-- // breadcrumbs --> 
            </div>
            <!-- // drawer --> 
        </div>
    </div>
    <!-- // header-container -->
    
    <div id="main-container">
        <div id="main-sidebar" class="sidebar sidebar-inverse">
            <div class="sidebar-item">
                <div class="media profile">
                    <div class="media-thumb media-left thumb-bordereb"> <a class="img-shadow" href="javascript:void(0);"><img class="thumb" src="assets/img/demo/demo-avatar9604.jpg"></a> </div>
                    <div class="media-body">
                        <h5 class="media-heading">Twitter Bootstrap <small>as Administrator</small></h5>
                        <p class="data">Last Access: 16 May 15:30</p>
                    </div>
                </div>
            </div>
            <!-- // sidebar item - profile -->
            
            <ul id="mainSideMenu" class="nav nav-list nav-side">
                <li class="accordion-group">
                    <div class="accordion-heading"> <a href="#accDash" data-parent="#mainSideMenu" data-toggle="collapse" class="accordion-toggle"> <span class="item-icon fontello-icon-monitor"></span> <i class="chevron fontello-icon-right-open-3"></i> Dashboards </a> </div>
                    <ul class="accordion-content nav nav-list collapse" id="accDash">
                        <li> <a href="dashboard-one.html"> <i class="fontello-icon-right-dir"></i> <span class="hidden-tablet">Dashboard</span> Demo 1 </a> </li>
                        <li> <a href="dashboard-two.html"> <i class="fontello-icon-right-dir"></i> <span class="hidden-tablet">Dashboard</span> Demo 2 </a> </li>
                    </ul>
                </li>
                <!-- // item accordionMenu Dashboard -->
                <li class="accordion-group">
                    <div class="accordion-heading"> <a href="#accForms" data-parent="#mainSideMenu" data-toggle="collapse" class="accordion-toggle"> <span class="item-icon aweso-icon-list-alt"></span><i class="chevron fontello-icon-right-open-3"></i> Form </a> </div>
                    <ul class="accordion-content nav nav-list collapse" id="accForms">
                        <li> <a href="component-form-demo.html"> <i class="fontello-icon-right-dir"></i> Demo Form </a> </li>
                        <li> <a href="component-form-element.html"> <i class="fontello-icon-right-dir"></i> Form Element </a> </li>
                        <li> <a href="component-form-extension.html"> <i class="fontello-icon-right-dir"></i> Form Extension</a> </li>
                        <li> <a href="component-form-wizard.html"> <i class="fontello-icon-right-dir"></i> Form Wizard</a> </li>
                    </ul>
                </li>
                <!-- // item accordionMenu Forms -->
                <li class="accordion-group">
                    <div class="accordion-heading active"> <a href="#accTables" data-parent="#mainSideMenu" data-toggle="collapse" class="accordion-toggle"> <span class="item-icon fontello-icon-align-justify"></span> <i class="chevron fontello-icon-right-open-3"></i> Tables </a> </div>
                    <ul class="accordion-content nav nav-list collapse in" id="accTables">
                        <li> <a href="component-table.html"> <i class="fontello-icon-right-dir"></i> Base Table </a> </li>
                        <li class="active"> <a href="component-table-boo.html"> <i class="fontello-icon-right-dir"></i> Boo Table </a> </li>
                        <li> <a href="component-table-datatable.html"> <i class="fontello-icon-right-dir"></i> DataTable </a> </li>
                    </ul>
                </li>
                <!-- // item accordionMenu Tables -->
                <li class="accordion-group">
                    <div class="accordion-heading"> <a href="#accStatistics" data-parent="#mainSideMenu" data-toggle="collapse" class="accordion-toggle"> <span class="item-icon fontello-icon-chart"></span> <i class="chevron fontello-icon-right-open-3"></i> Statistics </a> </div>
                    <ul class="accordion-content nav nav-list collapse" id="accStatistics">
                        <li> <a href="statistic-flot.html"> <i class="fontello-icon-right-dir"></i> Charts </a> </li>
                        <li> <a href="statistic-sparkline.html"> <i class="fontello-icon-right-dir"></i> Sparklines </a> </li>
                    </ul>
                </li>
                <!-- // item accordionMenu Statistics -->
                <li class="accordion-group">
                    <div class="accordion-heading"> <a href="#accWidgets" data-parent="#mainSideMenu" data-toggle="collapse" class="accordion-toggle"> <span class="item-icon  fontello-icon-window"></span> <i class="chevron fontello-icon-right-open-3"></i> Widgets </a> </div>
                    <ul class="accordion-content nav nav-list collapse" id="accWidgets">
                        <li> <a href="component-widget-style.html"> <i class="fontello-icon-right-dir"></i> <span class="hidden-tablet">Widgets </span> Style </a> </li>
                        <li> <a href="component-widget-custom.html"> <i class="fontello-icon-right-dir"></i> <span class="hidden-tablet">Widgets </span> Custom </a> </li>
                    </ul>
                </li>
                <!-- // item accordionMenu Widgets -->
                <li class="accordion-group">
                    <div class="accordion-heading"> <a href="#accButtons" data-parent="#mainSideMenu" data-toggle="collapse" class="accordion-toggle"> <span class="item-icon fontello-icon-puzzle"></span> <i class="chevron fontello-icon-right-open-3"></i> UI Elements </a> </div>
                    <ul class="accordion-content nav nav-list collapse" id="accButtons">
                        <li> <a href="elements-button.html"> <i class="fontello-icon-right-dir"></i> Button </a> </li>
                        <li> <a href="elements-icon-font.html"> <i class="fontello-icon-right-dir"></i> Iconic fonts </a> </li>
                        <li> <a href="elements-icon-fugue-demo.html"> <i class="fontello-icon-right-dir"></i> Icon </a> </li>
                        <li> <a href="elements-wells.html"> <i class="fontello-icon-right-dir"></i> Wells </a> </li>
                        <li> <a href="elements-tabs.html"> <i class="fontello-icon-right-dir"></i> Tabs </a> </li>
                        <li> <a href="elements-modals.html"> <i class="fontello-icon-right-dir"></i> Modal </a> </li>
                        <li> <a href="elements-progressbar.html"> <i class="fontello-icon-right-dir"></i> Progressbar </a> </li>
                    </ul>
                </li>
                <!-- // item accordionMenu UI Elements -->
                <li class="accordion-group">
                    <div class="accordion-heading"> <a href="#accCalendar" data-parent="#mainSideMenu" data-toggle="collapse" class="accordion-toggle"> <span class="item-icon fontello-icon-calendar"></span> <i class="chevron fontello-icon-right-open-3"></i> Calendar </a> </div>
                    <ul class="accordion-content nav nav-list collapse" id="accCalendar">
                        <li> <a href="component-fullcalendar-demo.html"> <i class="fontello-icon-right-dir"></i> <span class="hidden-tablet">Calendar </span> Demo </a> </li>
                        <li> <a href="component-fullcalendar.html"> <i class="fontello-icon-right-dir"></i> <span class="hidden-tablet">Calendar </span> Style </a> </li>
                    </ul>
                </li>
                <!-- // item accordionMenu Calendar -->
            </ul>
            <!-- // sidebar menu -->
            
            <div class="sidebar-item"></div>
            <!-- // sidebar item --> 
            
        </div>
        <!-- // sidebar -->
        
        <div id="main-content" class="main-content container-fluid">
            <div class="row-fluid page-head">
                <h2><i class="aweso-icon-table"></i> Boo Tables <small>more style for table </small></h2>
                <div class="page-bar">
                    <div class="btn-toolbar"> </div>
                </div>
            </div>
            <!-- // page head -->
            
            <div id="page-content" class="page-content">
                <section>
                    <div class="page-header">
                        <h3><i class="fontello-icon-th-1 opaci35"></i> table <small>.boo-table + bootstrap class</small></h3>
                    </div>
                    <!-- // page-header -->
                    
                    <div class="row-fluid">
                        <div class="span4 grider">
                            <div class="well well-box well-nice">
                                <div class="navbar">
                                    <div class="navbar-inner no-bg">
                                        <h4 class="title"><i class="fontello-icon-window"></i> Classes for tables <small>default</small></h4>
                                    </div>
                                </div>
                                <!-- // navbar -->
                                <div class="section-content item">
                                    <p>Boo extends display the data in the tables combination of other classes aplikovanch the table element or a wrapper table.</p>
                                </div>
                                <!-- // content item -->
                                <div class="section-content-table">
                                    <table class="table table-striped table-content">
                                        <colgroup>
                                        <col class="col30">
                                        <col class="col70">
                                        </colgroup>
                                        <thead>
                                            <tr>
                                                <th>class</th>
                                                <th>description</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr>
                                                <td><code>.table</code></td>
                                                <td>default table style</td>
                                            </tr>
                                             <tr>
                                                <td><code>.boo-table</code></td>
                                                <td>Styling tables (thead, tfoot, caption, border)</td>
                                            </tr>
                                            <tr>
                                                <td><code>.table-striped</code></td>
                                                <td>Adds zebra-striping to any table row within the <code>tbody</code></td>
                                            </tr>
                                            <tr>
                                                <td><code>.table-bordered</code></td>
                                                <td>Add borders and rounded corners to the table.</td>
                                            </tr>
                                            <tr>
                                                <td><code>.table-hover</code></td>
                                                <td>Enable a hover state on table rows within a <code>tbody</code></td>
                                            </tr>
                                            <tr>
                                                <td><code>.table-condensed</code></td>
                                                <td>Makes tables more compact by cutting cell padding in half.</td>
                                            </tr>
                                            <tr>
                                                <td><code>.table-content</code></td>
                                                <td>Style for the table located inside of something (well, widget, wrapper)</td>
                                            </tr>
                                            <tr>
                                                <td><code>.table-light</code></td>
                                                <td>Table without lines and columns. Removes border</td>
                                            </tr>
                                            <tr>
                                                <td><code>.filter</code></td>
                                                <td>Class for column filter to element <code>thead or tfoot</code>. Apli to <code>tr</code></td>
                                            </tr>
                                            <tr>
                                                <td><code>.column-sorter</code></td>
                                                <td>Add sortable arrow for table. Apli to <code>span</code> in <code>th</code></td>
                                            </tr>
                                            <tr>
                                                <td><code>.total</code></td>
                                                <td>Line for the total in <code>tfoot</code> </td>
                                            </tr>
                                            <tr>
                                                <td><code>.pagination-btn</code><br><code>.pagination-boo</code></td>
                                                <td>pagination style as button bootstrap </td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                                <!-- // table-content --> 
                            </div>
                            <pre class="prettyprint linenums">
&lt;!-- Boo table --&gt;
&lt;table class="table boo-table"&gt;
    ...
&lt;/table&gt;

&lt;!-- Table combine class --&gt;
&lt;table class="table boo-table table-striped table-bordered ..."&gt;
    ...
&lt;/table&gt;
</pre>
							<pre class="prettyprint linenums">
&lt;!-- Boo table --&gt;
&lt;table class="table boo-table ..."&gt;
    &lt;caption&gt; ... &lt;/caption&gt;
    &lt;thead&gt; ... &lt;/thead&gt;
    &lt;tfoot&gt; ... &lt;/tfoot&gt;
    &lt;tbody&gt; ... &lt;/tbody&gt;
&lt;/table&gt;</pre>
							<pre class="prettyprint linenums">
&lt;table class="table boo-table ..."&gt;
    &lt;thead&gt; 
        &lt;tr&gt;
            &lt;th class="sorting_asc"&gt;ID 
                &lt;span class="column-sorter"&gt;&lt;/span&gt;&lt;/th&gt;
            &lt;th class="sorting"&gt;Name 
                &lt;span class="column-sorter"&gt;&lt;/span&gt;&lt;/th&gt;
            &lt;th class="sorting"&gt;City 
                &lt;span class="column-sorter"&gt;&lt;/span&gt;&lt;/th&gt;
        &lt;/tr&gt;
    &lt;/thead&gt;
    &lt;tfoot&gt; 
         &lt;tr class="total ..."&gt; ... &lt;/tr&gt;
    &lt;/tfoot&gt;
    &lt;tbody&gt; ... &lt;/tbody&gt;
&lt;/table&gt;</pre>
                        </div>
                        <!-- // Column -->
                        
                        <div class="span8 grider">
                            <h3><i class="aweso-icon-table"></i> boo table <small>all default class</small></h3>
                            <table class="table table-striped table-bordered boo-table">
                                <thead>
                                    <tr>
                                        <th scope="col">ID</th>
                                        <th scope="col">Name</th>
                                        <th scope="col" class="hidden-phone">City</th>
                                        <th scope="col" class="hidden-tablet hidden-phone">Email</th>
                                        <th scope="col">Date of birth</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td>1</td>
                                        <td>Colin Nixon</td>
                                        <td class="hidden-phone">Long Beach</td>
                                        <td class="hidden-tablet hidden-phone">semper@diamSeddiam.edu</td>
                                        <td>02/10/1986</td>
                                    </tr>
                                    <tr>
                                        <td>2</td>
                                        <td>Naida Bennett</td>
                                        <td class="hidden-phone">Lockport</td>
                                        <td class="hidden-tablet hidden-phone">commodo@conseque.ca</td>
                                        <td>04/21/1959</td>
                                    </tr>
                                    <tr>
                                        <td>3</td>
                                        <td>Danielle Myers</td>
                                        <td class="hidden-phone">Bentonville</td>
                                        <td class="hidden-tablet hidden-phone">nunc.sed@liberoInteger.ca</td>
                                        <td>12/11/1971</td>
                                    </tr>
                                    <tr>
                                        <td>4</td>
                                        <td>Whitney Jones</td>
                                        <td class="hidden-phone">Troy</td>
                                        <td class="hidden-tablet hidden-phone">Nunc@sedliberoProin.edu</td>
                                        <td>08/09/1976</td>
                                    </tr>
                                    <tr>
                                        <td>5</td>
                                        <td>Marvin Bell</td>
                                        <td class="hidden-phone">Cody</td>
                                        <td class="hidden-tablet hidden-phone">aliquet@Craspellentesque.com</td>
                                        <td>10/17/1979</td>
                                    </tr>
                                </tbody>
                            </table>
                            <!-- // Table Boo -->
                            
                            <hr>
                            <h3><i class="aweso-icon-table"></i> table <small>.table-content</small></h3>
                            <p><code>table-bordered</code> class can not be combined and <code>table-content</code></p>
                            <table class="table boo-table table-striped table-content">
                                <tbody>
                                    <tr>
                                        <td>1</td>
                                        <td>Colin Nixon</td>
                                        <td class="hidden-phone">Long Beach</td>
                                        <td class="hidden-tablet hidden-phone">semper@diamSeddiam.edu</td>
                                        <td>02/10/1986</td>
                                    </tr>
                                    <tr>
                                        <td>2</td>
                                        <td>Naida Bennett</td>
                                        <td class="hidden-phone">Lockport</td>
                                        <td class="hidden-tablet hidden-phone">commodo@conseque.ca</td>
                                        <td>04/21/1959</td>
                                    </tr>
                                    <tr>
                                        <td>3</td>
                                        <td>Danielle Myers</td>
                                        <td class="hidden-phone">Bentonville</td>
                                        <td class="hidden-tablet hidden-phone">nunc.sed@liberoInteger.ca</td>
                                        <td>12/11/1971</td>
                                    </tr>
                                    <tr>
                                        <td>4</td>
                                        <td>Whitney Jones</td>
                                        <td class="hidden-phone">Troy</td>
                                        <td class="hidden-tablet hidden-phone">Nunc@sedliberoProin.edu</td>
                                        <td>08/09/1976</td>
                                    </tr>
                                    <tr>
                                        <td>5</td>
                                        <td>Marvin Bell</td>
                                        <td class="hidden-phone">Cody</td>
                                        <td class="hidden-tablet hidden-phone">aliquet@Craspellentesque.com</td>
                                        <td>10/17/1979</td>
                                    </tr>
                                </tbody>
                            </table>
                            <!-- // Table Content -->
                            
                            <h3><i class="aweso-icon-table"></i> table <small>.table-light</small></h3>
                            <p><code>table-light</code></p>
                            <table class="table boo-table table-condensed table-light table-content">
                                <tbody>
                                    <tr>
                                        <td>1</td>
                                        <td>Colin Nixon</td>
                                        <td class="hidden-phone">Long Beach</td>
                                        <td class="hidden-tablet hidden-phone">semper@diamSeddiam.edu</td>
                                        <td>02/10/1986</td>
                                    </tr>
                                    <tr>
                                        <td>2</td>
                                        <td>Naida Bennett</td>
                                        <td class="hidden-phone">Lockport</td>
                                        <td class="hidden-tablet hidden-phone">commodo@conseque.ca</td>
                                        <td>04/21/1959</td>
                                    </tr>
                                    <tr>
                                        <td>3</td>
                                        <td>Danielle Myers</td>
                                        <td class="hidden-phone">Bentonville</td>
                                        <td class="hidden-tablet hidden-phone">nunc.sed@liberoInteger.ca</td>
                                        <td>12/11/1971</td>
                                    </tr>
                                    <tr>
                                        <td>4</td>
                                        <td>Whitney Jones</td>
                                        <td class="hidden-phone">Troy</td>
                                        <td class="hidden-tablet hidden-phone">Nunc@sedliberoProin.edu</td>
                                        <td>08/09/1976</td>
                                    </tr>
                                    <tr>
                                        <td>5</td>
                                        <td>Marvin Bell</td>
                                        <td class="hidden-phone">Cody</td>
                                        <td class="hidden-tablet hidden-phone">aliquet@Craspellentesque.com</td>
                                        <td>10/17/1979</td>
                                    </tr>
                                </tbody>
                            </table>
                            <!-- // Table Content -->
                            
                            <p class="margin-xm"><code>table-light table-striped</code> use backround <code>bg-white</code></p>
                            <table class="table boo-table table-condensed table-striped table-light table-content bg-white">
                                <tbody>
                                    <tr>
                                        <td>1</td>
                                        <td>Colin Nixon</td>
                                        <td class="hidden-phone">Long Beach</td>
                                        <td class="hidden-tablet hidden-phone">semper@diamSeddiam.edu</td>
                                        <td>02/10/1986</td>
                                    </tr>
                                    <tr>
                                        <td>2</td>
                                        <td>Naida Bennett</td>
                                        <td class="hidden-phone">Lockport</td>
                                        <td class="hidden-tablet hidden-phone">commodo@conseque.ca</td>
                                        <td>04/21/1959</td>
                                    </tr>
                                    <tr>
                                        <td>3</td>
                                        <td>Danielle Myers</td>
                                        <td class="hidden-phone">Bentonville</td>
                                        <td class="hidden-tablet hidden-phone">nunc.sed@liberoInteger.ca</td>
                                        <td>12/11/1971</td>
                                    </tr>
                                    <tr>
                                        <td>4</td>
                                        <td>Whitney Jones</td>
                                        <td class="hidden-phone">Troy</td>
                                        <td class="hidden-tablet hidden-phone">Nunc@sedliberoProin.edu</td>
                                        <td>08/09/1976</td>
                                    </tr>
                                    <tr>
                                        <td>5</td>
                                        <td>Marvin Bell</td>
                                        <td class="hidden-phone">Cody</td>
                                        <td class="hidden-tablet hidden-phone">aliquet@Craspellentesque.com</td>
                                        <td>10/17/1979</td>
                                    </tr>
                                </tbody>
                            </table>
                            <!-- // Table Content -->
                            
                            <hr>
                            <h3><i class="aweso-icon-table"></i> table <small>caption, total</small></h3>
                            <p>This is the caption for <code>.boo-table .table-content</code></p>
                            <table class="table boo-table table-striped table-content table-hover">
                                <colgroup>
                                <col class="col20">
                                <col class="col20">
                                <col class="col45">
                                <col class="col15">
                                </colgroup>
                                <caption>
                                Boo Table Caption - Title fot table <span>Here text in span</span>
                                </caption>
                                <thead>
                                    <tr id="HeadersRow0">
                                        <th scope="col">Order ID</th>
                                        <th scope="col">Customer ID</th>
                                        <th scope="col">Shipped Date</th>
                                        <th scope="col">Costs</th>
                                    </tr>
                                </thead>
                                <tfoot>
                                    <tr class="total" id="HeadersRow0">
                                        <th>Total sum</th>
                                        <th></th>
                                        <th></th>
                                        <th class="text-right">202.46</th>
                                    </tr>
                                </tfoot>
                                <tbody>
                                    <tr id="DataRow0">
                                        <td class="bold"><a href="#">10248</a></td>
                                        <td>VINET</td>
                                        <td>8/16/2012</td>
                                        <td class="text-right">32.38</td>
                                    </tr>
                                    <tr id="DataRow1">
                                        <td class="bold"><a href="#">10249</a></td>
                                        <td>TOMSP</td>
                                        <td>8/10/2012</td>
                                        <td class="text-right">11.61</td>
                                    </tr>
                                    <tr id="DataRow2">
                                        <td class="bold"><a href="#">10250</a></td>
                                        <td>HANAR</td>
                                        <td>8/12/2012</td>
                                        <td class="text-right">65.83</td>
                                    </tr>
                                    <tr id="DataRow3">
                                        <td class="bold"><a href="#">10251</a></td>
                                        <td>VICTE</td>
                                        <td>8/15/2012</td>
                                        <td class="text-right">41.34</td>
                                    </tr>
                                    <tr id="DataRow4">
                                        <td class="bold"><a href="#">10252</a></td>
                                        <td>SUPRD</td>
                                        <td>8/11/2012</td>
                                        <td class="text-right">51.3</td>
                                    </tr>
                                </tbody>
                            </table>
                            <!-- // Table Boo Caption, total --> 
                            
                        </div>
                        <!-- // Column --> 
                        
                    </div>
                    <!-- // Example row --> 
                </section>
                <section>
                    <div class="page-header">
                        <h3><i class="aweso-icon-table opaci35"></i> table <small>add color and base wrap</small></h3>
                    </div>
                    <!-- // page-header -->
                    <div class="row-fluid">
                        <div class="span6 grider">
                            <div class="table-wrapper">
                                <table class="table boo-table table-striped table-condensed table-content bg-blue-light">
                                    <colgroup>
                                    <col class="col20">
                                    <col class="col20">
                                    <col class="col45">
                                    <col class="col15">
                                    </colgroup>
                                    <tbody>
                                        <tr id="DataRow0">
                                            <td class="bold"><a href="#">10248</a></td>
                                            <td>VINET</td>
                                            <td>8/16/2012</td>
                                            <td class="text-right">32.38</td>
                                        </tr>
                                        <tr id="DataRow1">
                                            <td class="bold"><a href="#">10249</a></td>
                                            <td>TOMSP</td>
                                            <td>8/10/2012</td>
                                            <td class="text-right">11.61</td>
                                        </tr>
                                        <tr id="DataRow2">
                                            <td class="bold"><a href="#">10250</a></td>
                                            <td>HANAR</td>
                                            <td>8/12/2012</td>
                                            <td class="text-right">65.83</td>
                                        </tr>
                                    </tbody>
                                </table>
                                <!-- // Table --> 
                            </div>
                            <!-- // Table wrapper -->
                            
                            <div class="table-wrapper">
                                <table class="table boo-table table-striped table-condensed table-content bg-blue-light">
                                    <colgroup>
                                    <col class="col20">
                                    <col class="col20">
                                    <col class="col45">
                                    <col class="col15">
                                    </colgroup>
                                    <thead>
                                        <tr id="HeadersRow0">
                                            <th scope="col">Order ID</th>
                                            <th scope="col">Customer ID</th>
                                            <th scope="col">Shipped Date</th>
                                            <th scope="col">Costs</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr id="DataRow0">
                                            <td class="bold"><a href="#">10248</a></td>
                                            <td>VINET</td>
                                            <td>8/16/2012</td>
                                            <td class="text-right">32.38</td>
                                        </tr>
                                        <tr id="DataRow1">
                                            <td class="bold"><a href="#">10249</a></td>
                                            <td>TOMSP</td>
                                            <td>8/10/2012</td>
                                            <td class="text-right">11.61</td>
                                        </tr>
                                        <tr id="DataRow2">
                                            <td class="bold"><a href="#">10250</a></td>
                                            <td>HANAR</td>
                                            <td>8/12/2012</td>
                                            <td class="text-right">65.83</td>
                                        </tr>
                                    </tbody>
                                </table>
                                <!-- // Table --> 
                            </div>
                            <!-- // Table wrapper -->
                            
                            <div class="table-wrapper">
                                <table class="table boo-table table-striped table-condensed table-content bg-blue-light">
                                    <colgroup>
                                    <col class="col20">
                                    <col class="col20">
                                    <col class="col45">
                                    <col class="col15">
                                    </colgroup>
                                    <caption>
                                    Boo Table Caption - Title fot table <span>Here text in span</span>
                                    </caption>
                                    <tbody>
                                        <tr id="DataRow0">
                                            <td class="bold"><a href="#">10248</a></td>
                                            <td>VINET</td>
                                            <td>8/16/2012</td>
                                            <td class="text-right">32.38</td>
                                        </tr>
                                        <tr id="DataRow1">
                                            <td class="bold"><a href="#">10249</a></td>
                                            <td>TOMSP</td>
                                            <td>8/10/2012</td>
                                            <td class="text-right">11.61</td>
                                        </tr>
                                        <tr id="DataRow2">
                                            <td class="bold"><a href="#">10250</a></td>
                                            <td>HANAR</td>
                                            <td>8/12/2012</td>
                                            <td class="text-right">65.83</td>
                                        </tr>
                                    </tbody>
                                </table>
                                <!-- // Table --> 
                            </div>
                            <!-- // Table wrapper --> 
                        </div>
                        <!-- // Column -->
                        
                        <div class="span6 grider">
                            <div class="table-wrapper">
                                <table class="table boo-table table-striped table-condensed table-content bg-blue-light">
                                    <colgroup>
                                    <col class="col20">
                                    <col class="col20">
                                    <col class="col45">
                                    <col class="col15">
                                    </colgroup>
                                    <caption>
                                    Boo Table Caption - Title fot table <span>Here text in span</span>
                                    </caption>
                                    <thead>
                                        <tr id="HeadersRow0">
                                            <th scope="col">Order ID</th>
                                            <th scope="col">Customer ID</th>
                                            <th scope="col">Shipped Date</th>
                                            <th scope="col">Costs</th>
                                        </tr>
                                    </thead>
                                    <tfoot>
                                        <tr id="HeadersRow0" class="total">
                                            <th>Total sum</th>
                                            <th></th>
                                            <th></th>
                                            <th class="text-right">109.82</th>
                                        </tr>
                                    </tfoot>
                                    <tbody>
                                        <tr id="DataRow0">
                                            <td class="bold"><a href="#">10248</a></td>
                                            <td>VINET</td>
                                            <td>8/16/2012</td>
                                            <td class="text-right">32.38</td>
                                        </tr>
                                        <tr id="DataRow1">
                                            <td class="bold"><a href="#">10249</a></td>
                                            <td>TOMSP</td>
                                            <td>8/10/2012</td>
                                            <td class="text-right">11.61</td>
                                        </tr>
                                        <tr id="DataRow2">
                                            <td class="bold"><a href="#">10250</a></td>
                                            <td>HANAR</td>
                                            <td>8/12/2012</td>
                                            <td class="text-right">65.83</td>
                                        </tr>
                                    </tbody>
                                </table>
                                <!-- // Table --> 
                            </div>
                            <!-- // Table wrapper -->
                            <pre class="prettyprint linenums">
&lt;!-- Table wrapp --&gt;
&lt;div class="table-wrapper"&gt;
    &lt;table class="table boo-table table-content ...."&gt;
        ...
    &lt;/table&gt;
&lt;/div&gt;
</pre> 
                        </div>
                        <!-- // Column --> 
                        
                    </div>
                    <!-- // Example row --> 
                </section>
                <section>
                    <div class="page-header">
                        <h3><i class="aweso-icon-table opaci35"></i> base table <small>in .well-small .well-nice</small></h3>
                    </div>
                    <!-- // page-header -->
                    <div class="row-fluid">
                        <div class="well well-small well-nice">
                            <table class="table table-content table-hover">
                                <caption>
                                Default table in well <span>well-small</span>
                                </caption>
                                <thead>
                                    <tr>
                                        <th scope="col">ID</th>
                                        <th scope="col">Name</th>
                                        <th scope="col" class="hidden-phone">City</th>
                                        <th scope="col" class="hidden-tablet hidden-phone">Email</th>
                                        <th scope="col">Date of birth</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td>1</td>
                                        <td>Colin Nixon</td>
                                        <td class="hidden-phone">Long Beach</td>
                                        <td class="hidden-tablet hidden-phone">semper@diamSeddiam.edu</td>
                                        <td>02/10/1986</td>
                                    </tr>
                                    <tr>
                                        <td>2</td>
                                        <td>Naida Bennett</td>
                                        <td class="hidden-phone">Lockport</td>
                                        <td class="hidden-tablet hidden-phone">commodo@conseque.ca</td>
                                        <td>04/21/1959</td>
                                    </tr>
                                    <tr>
                                        <td>3</td>
                                        <td>Danielle Myers</td>
                                        <td class="hidden-phone">Bentonville</td>
                                        <td class="hidden-tablet hidden-phone">nunc.sed@liberoInteger.ca</td>
                                        <td>12/11/1971</td>
                                    </tr>
                                    <tr>
                                        <td>4</td>
                                        <td>Whitney Jones</td>
                                        <td class="hidden-phone">Troy</td>
                                        <td class="hidden-tablet hidden-phone">Nunc@sedliberoProin.edu</td>
                                        <td>08/09/1976</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                        <!-- // Default table in well -->
                        <div class="clearfix margin-xx"><!-- // only demo separator --></div>
                        <div class="well well-small well-nice">
                            <table class="table boo-table table-striped table-content table-hover bg-blue-light">
                                <caption>
                                Boo table in well <span>well-small and backgroud</span>
                                </caption>
                                <thead>
                                    <tr>
                                        <th scope="col">ID</th>
                                        <th scope="col">Name</th>
                                        <th scope="col" class="hidden-phone">City</th>
                                        <th scope="col" class="hidden-tablet hidden-phone">Email</th>
                                        <th scope="col">Date of birth</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td>1</td>
                                        <td>Colin Nixon</td>
                                        <td class="hidden-phone">Long Beach</td>
                                        <td class="hidden-tablet hidden-phone">semper@diamSeddiam.edu</td>
                                        <td>02/10/1986</td>
                                    </tr>
                                    <tr>
                                        <td>2</td>
                                        <td>Naida Bennett</td>
                                        <td class="hidden-phone">Lockport</td>
                                        <td class="hidden-tablet hidden-phone">commodo@conseque.ca</td>
                                        <td>04/21/1959</td>
                                    </tr>
                                    <tr>
                                        <td>3</td>
                                        <td>Danielle Myers</td>
                                        <td class="hidden-phone">Bentonville</td>
                                        <td class="hidden-tablet hidden-phone">nunc.sed@liberoInteger.ca</td>
                                        <td>12/11/1971</td>
                                    </tr>
                                    <tr>
                                        <td>4</td>
                                        <td>Whitney Jones</td>
                                        <td class="hidden-phone">Troy</td>
                                        <td class="hidden-tablet hidden-phone">Nunc@sedliberoProin.edu</td>
                                        <td>08/09/1976</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                        <!-- // Boo table in well -->
                        <div class="clearfix margin-xx"><!-- // only demo separator --></div>
                        <div class="well well-small well-black">
                            <table class="table boo-table table-striped table-condensed table-hover table-content">
                                <colgroup>
                                <col class="col20">
                                <col class="col20">
                                <col class="col45">
                                <col class="col15">
                                </colgroup>
                                <caption>
                                Boo table in well-black <span>total</span>
                                </caption>
                                <thead>
                                    <tr id="HeadersRow0">
                                        <th scope="col">Order ID</th>
                                        <th scope="col">Customer ID</th>
                                        <th scope="col">Shipped Date</th>
                                        <th scope="col">Costs</th>
                                    </tr>
                                </thead>
                                <tfoot>
                                    <tr id="HeadersRow0" class="total">
                                        <th>Total sum</th>
                                        <th></th>
                                        <th></th>
                                        <th class="text-right">109.82</th>
                                    </tr>
                                </tfoot>
                                <tbody>
                                    <tr id="DataRow0">
                                        <td class="bold"><a href="#">10248</a></td>
                                        <td>VINET</td>
                                        <td>8/16/2012</td>
                                        <td class="text-right">32.38</td>
                                    </tr>
                                    <tr id="DataRow1">
                                        <td class="bold"><a href="#">10249</a></td>
                                        <td>TOMSP</td>
                                        <td>8/10/2012</td>
                                        <td class="text-right">11.61</td>
                                    </tr>
                                    <tr id="DataRow2">
                                        <td class="bold"><a href="#">10250</a></td>
                                        <td>HANAR</td>
                                        <td>8/12/2012</td>
                                        <td class="text-right">65.83</td>
                                    </tr>
                                    <tr id="DataRow0">
                                        <td class="bold"><a href="#">10248</a></td>
                                        <td>VINET</td>
                                        <td>8/16/2012</td>
                                        <td class="text-right">32.38</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                        <!-- // Boo table in well-black -->
                        <div class="clearfix margin-xx"><!-- // only demo separator --></div>
                    </div>
                    <!-- // Example row -->
                    
                    <div class="page-header">
                        <h3><i class="aweso-icon-table opaci35"></i> table in well <small>use navbar</small></h3>
                    </div>
                    <!-- // page-header -->
                    <div class="row-fluid">
                        <div class="well well-small well-nice">
                            <div class="navbar">
                                <div class="navbar-inner">
                                    <h4 class="title"><i class="fontello-icon-window"></i> Boo table <small>in well-box</small></h4>
                                    <ul class="nav pull-right">
                                        <li><a href="#">Link</a></li>
                                        <li class="divider-vertical"></li>
                                        <li class="dropdown"> <a data-toggle="dropdown" class="dropdown-toggle" href="#">Dropdown <b class="caret"></b></a>
                                            <ul class="dropdown-menu">
                                                <li><a href="#">Action</a></li>
                                                <li><a href="#">Another action</a></li>
                                                <li><a href="#">Something else here</a></li>
                                                <li class="divider"></li>
                                                <li><a href="#">Separated link</a></li>
                                            </ul>
                                        </li>
                                    </ul>
                                    <!-- // nav --> 
                                </div>
                            </div>
                            <!-- // navbar -->
                            <div class="table-wrapper">
                                <table class="table boo-table table-content table-hover">
                                    <thead>
                                        <tr>
                                            <th scope="col">ID</th>
                                            <th scope="col">Name</th>
                                            <th scope="col" class="hidden-phone">City</th>
                                            <th scope="col" class="hidden-tablet hidden-phone">Email</th>
                                            <th scope="col">Date of birth</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td>1</td>
                                            <td>Colin Nixon</td>
                                            <td class="hidden-phone">Long Beach</td>
                                            <td class="hidden-tablet hidden-phone">semper@diamSeddiam.edu</td>
                                            <td>02/10/1986</td>
                                        </tr>
                                        <tr>
                                            <td>2</td>
                                            <td>Naida Bennett</td>
                                            <td class="hidden-phone">Lockport</td>
                                            <td class="hidden-tablet hidden-phone">commodo@conseque.ca</td>
                                            <td>04/21/1959</td>
                                        </tr>
                                        <tr>
                                            <td>3</td>
                                            <td>Danielle Myers</td>
                                            <td class="hidden-phone">Bentonville</td>
                                            <td class="hidden-tablet hidden-phone">nunc.sed@liberoInteger.ca</td>
                                            <td>12/11/1971</td>
                                        </tr>
                                        <tr>
                                            <td>4</td>
                                            <td>Whitney Jones</td>
                                            <td class="hidden-phone">Troy</td>
                                            <td class="hidden-tablet hidden-phone">Nunc@sedliberoProin.edu</td>
                                            <td>08/09/1976</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                            <!-- // table-wrapper --> 
                            
                        </div>
                        <!-- // Boo table in well-nice --> 
                        
                    </div>
                    <!-- // Example row -->
                    
                    <div class="page-header">
                        <h3><i class="aweso-icon-table opaci35"></i> table in well <small>with navbar</small></h3>
                    </div>
                    <!-- // page-header -->
                    <div class="row-fluid">
                        <div class="well well-box well-nice no-border">
                            <div class="navbar">
                                <div class="navbar-inner">
                                    <h4 class="title"><i class="fontello-icon-window"></i> Boo table <small>in well-box</small></h4>
                                    <ul class="nav pull-right">
                                        <li><a href="#">Link</a></li>
                                        <li class="divider-vertical"></li>
                                        <li class="dropdown"> <a data-toggle="dropdown" class="dropdown-toggle" href="#">Dropdown <b class="caret"></b></a>
                                            <ul class="dropdown-menu">
                                                <li><a href="#">Action</a></li>
                                                <li><a href="#">Another action</a></li>
                                                <li><a href="#">Something else here</a></li>
                                                <li class="divider"></li>
                                                <li><a href="#">Separated link</a></li>
                                            </ul>
                                        </li>
                                    </ul>
                                    <!-- // nav --> 
                                </div>
                            </div>
                            <!-- // navbar -->
                            <table class="table boo-table _table-condensed table-content table-hover">
                                <!--<caption>
                                        Boo table in well-nice <span>with navbar default</span>
                                        </caption> -->
                                <thead>
                                    <tr>
                                        <th scope="col">ID</th>
                                        <th scope="col">Name</th>
                                        <th scope="col" class="hidden-phone">City</th>
                                        <th scope="col" class="hidden-tablet hidden-phone">Email</th>
                                        <th scope="col">Date of birth</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td>1</td>
                                        <td>Colin Nixon</td>
                                        <td class="hidden-phone">Long Beach</td>
                                        <td class="hidden-tablet hidden-phone">semper@diamSeddiam.edu</td>
                                        <td>02/10/1986</td>
                                    </tr>
                                    <tr>
                                        <td>2</td>
                                        <td>Naida Bennett</td>
                                        <td class="hidden-phone">Lockport</td>
                                        <td class="hidden-tablet hidden-phone">commodo@conseque.ca</td>
                                        <td>04/21/1959</td>
                                    </tr>
                                    <tr>
                                        <td>3</td>
                                        <td>Danielle Myers</td>
                                        <td class="hidden-phone">Bentonville</td>
                                        <td class="hidden-tablet hidden-phone">nunc.sed@liberoInteger.ca</td>
                                        <td>12/11/1971</td>
                                    </tr>
                                    <tr>
                                        <td>4</td>
                                        <td>Whitney Jones</td>
                                        <td class="hidden-phone">Troy</td>
                                        <td class="hidden-tablet hidden-phone">Nunc@sedliberoProin.edu</td>
                                        <td>08/09/1976</td>
                                    </tr>
                                </tbody>
                            </table>
                            <!-- // table --> 
                        </div>
                        <!-- // Boo table in well-box -->
                        <div class="clearfix margin-xx"><!-- // only demo separator --></div>
                        <div class="well well-nice well-box no-border">
                            <div class="navbar">
                                <div class="navbar-inner">
                                    <h4 class="title"><i class="fontello-icon-palette"></i> Boo color background table</h4>
                                    <ul class="nav nav-pills pull-right">
                                        <li class="active"><a href="#tab1" data-toggle="tab">Blue light</a></li>
                                        <li><a href="#tab2" data-toggle="tab">Green light</a></li>
                                        <li><a href="#tab3" data-toggle="tab">Yellow light</a></li>
                                    </ul>
                                    <!-- // nav --> 
                                </div>
                            </div>
                            <!-- // navbar -->
                            <div class="tab-content no-padding">
                                <div class="tab-pane active" id="tab1">
                                    <table class="table boo-table table-condensed table-striped table-content table-hover bg-blue-light">
                                        <caption>
                                        Boo color backgroud <span>Blue</span>
                                        </caption>
                                        <thead>
                                            <tr>
                                                <th>Full Name</th>
                                                <th>Phone</th>
                                                <th class="action">Action</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr>
                                                <td>Jacob Smith</td>
                                                <td>jacob.smith@example.com</td>
                                                <td class="action"><a class="btn btn-yellow btn-mini" href="#">Edit</a></td>
                                            </tr>
                                            <tr>
                                                <td>Isabella Johnson</td>
                                                <td>jacob.smith@example.com</td>
                                                <td class="action"><a class="btn btn-yellow btn-mini" href="#">Edit</a></td>
                                            </tr>
                                            <tr>
                                                <td>Ethan Williams</td>
                                                <td>ethan.williams@example.com</td>
                                                <td class="action"><a class="btn btn-yellow btn-mini" href="#">Edit</a></td>
                                            </tr>
                                            <tr>
                                                <td>Emma Jones</td>
                                                <td>emma.jones@example.com</td>
                                                <td class="action"><a class="btn btn-yellow btn-mini" href="#">Edit</a></td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                                <!-- // tab1 -->
                                <div class="tab-pane" id="tab2">
                                    <table class="table boo-table table-condensed table-striped table-content table-hover bg-green-light">
                                        <caption>
                                        Boo color backgroud <span>Green</span>
                                        </caption>
                                        <thead>
                                            <tr>
                                                <th>Full Name</th>
                                                <th>Phone</th>
                                                <th class="action">Action</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr>
                                                <td>Jacob Smith</td>
                                                <td>jacob.smith@example.com</td>
                                                <td class="action"><a class="btn btn-green btn-mini" href="#">Edit</a></td>
                                            </tr>
                                            <tr>
                                                <td>Isabella Johnson</td>
                                                <td>jacob.smith@example.com</td>
                                                <td class="action"><a class="btn btn-green btn-mini" href="#">Edit</a></td>
                                            </tr>
                                            <tr>
                                                <td>Ethan Williams</td>
                                                <td>ethan.williams@example.com</td>
                                                <td class="action"><a class="btn btn-green btn-mini" href="#">Edit</a></td>
                                            </tr>
                                            <tr>
                                                <td>Emma Jones</td>
                                                <td>emma.jones@example.com</td>
                                                <td class="action"><a class="btn btn-green btn-mini" href="#">Edit</a></td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                                <!-- // tab2 -->
                                <div class="tab-pane" id="tab3">
                                    <table class="table boo-table table-condensed table-striped table-content table-hover bg-yellow-light">
                                        <caption>
                                        Boo color backgroud <span>Yellow</span>
                                        </caption>
                                        <thead>
                                            <tr>
                                                <th>Full Name</th>
                                                <th>Phone</th>
                                                <th class="action">Action</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr>
                                                <td>Jacob Smith</td>
                                                <td>jacob.smith@example.com</td>
                                                <td class="action"><a class="btn btn-blue btn-mini" href="#">Edit</a></td>
                                            </tr>
                                            <tr>
                                                <td>Isabella Johnson</td>
                                                <td>jacob.smith@example.com</td>
                                                <td class="action"><a class="btn btn-blue btn-mini" href="#">Edit</a></td>
                                            </tr>
                                            <tr>
                                                <td>Ethan Williams</td>
                                                <td>ethan.williams@example.com</td>
                                                <td class="action"><a class="btn btn-blue btn-mini" href="#">Edit</a></td>
                                            </tr>
                                            <tr>
                                                <td>Emma Jones</td>
                                                <td>emma.jones@example.com</td>
                                                <td class="action"><a class="btn btn-blue btn-mini" href="#">Edit</a></td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                                <!-- // tab3 --> 
                            </div>
                            <!-- // tabs --> 
                        </div>
                        <!-- // Boo color table nav-pills -->
                        <div class="clearfix margin-xx"><!-- // only demo separator --></div>
                        <div class="well well-box well-black">
                            <div class="navbar navbar-inverse">
                                <div class="navbar-inner">
                                    <h4 class="title"><i class="fontello-icon-window"></i> Boo table <small>in well-box</small></h4>
                                    <ul class="nav pull-right">
                                        <li><a href="#">Link</a></li>
                                        <li class="divider-vertical"></li>
                                        <li class="dropdown"> <a data-toggle="dropdown" class="dropdown-toggle" href="#">Dropdown <b class="caret"></b></a>
                                            <ul class="dropdown-menu">
                                                <li><a href="#">Action</a></li>
                                                <li><a href="#">Another action</a></li>
                                                <li><a href="#">Something else here</a></li>
                                                <li class="divider"></li>
                                                <li><a href="#">Separated link</a></li>
                                            </ul>
                                        </li>
                                    </ul>
                                    <!-- // nav --> 
                                </div>
                            </div>
                            <!-- // navbar -->
                            <table class="table boo-table table-condensed table-content table-hover">
                                <caption>
                                Boo table in well-black <span>with navbar inverse</span>
                                </caption>
                                <thead>
                                    <tr>
                                        <th scope="col">ID</th>
                                        <th scope="col">Name</th>
                                        <th scope="col" class="hidden-phone">City</th>
                                        <th scope="col" class="hidden-tablet hidden-phone">Email</th>
                                        <th scope="col">Date of birth</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td>1</td>
                                        <td>Colin Nixon</td>
                                        <td class="hidden-phone">Long Beach</td>
                                        <td class="hidden-tablet hidden-phone">semper@diamSeddiam.edu</td>
                                        <td>02/10/1986</td>
                                    </tr>
                                    <tr>
                                        <td>2</td>
                                        <td>Naida Bennett</td>
                                        <td class="hidden-phone">Lockport</td>
                                        <td class="hidden-tablet hidden-phone">commodo@conseque.ca</td>
                                        <td>04/21/1959</td>
                                    </tr>
                                    <tr>
                                        <td>3</td>
                                        <td>Danielle Myers</td>
                                        <td class="hidden-phone">Bentonville</td>
                                        <td class="hidden-tablet hidden-phone">nunc.sed@liberoInteger.ca</td>
                                        <td>12/11/1971</td>
                                    </tr>
                                    <tr>
                                        <td>4</td>
                                        <td>Whitney Jones</td>
                                        <td class="hidden-phone">Troy</td>
                                        <td class="hidden-tablet hidden-phone">Nunc@sedliberoProin.edu</td>
                                        <td>08/09/1976</td>
                                    </tr>
                                </tbody>
                            </table>
                            <!-- // table --> 
                        </div>
                        <!-- // Boo table in well-box well-black -->
                        <div class="clearfix margin-xx"><!-- // only demo separator --></div>
                        <div class="well well-nice well-box no-border">
                            <div class="navbar">
                                <div class="navbar-inner">
                                    <h4 class="title"><i class="fontello-icon-palette"></i> More elements for table</h4>
                                    <ul class="btn-toolbar pull-right">
                                        <li class="divider-vertical"></li>
                                        <li><a class="btn" href="javascript:void(0)">button</a></li>
                                        <li><a class="btn btn-green" href="javascript:void(0)">button</a></li>
                                        <li class="divider-vertical"></li>
                                        <li><a class="btn btn-blue" href="javascript:void(0)">button</a></li>
                                        <li class="divider-vertical"></li>
                                        <li><a class="btn btn-glyph" href="javascript:void(0)"><i class="fugue-arrow-circle"></i></a></li>
                                    </ul>
                                    <!-- // btn-toolbar -->
                                    <ul class="nav nav-pills pull-right">
                                        <li class="active"><a href="#tab1A" data-toggle="tab">example 1</a></li>
                                        <li><a href="#tab2A" data-toggle="tab">example 2 (table-light)</a></li>
                                    </ul>
                                    <!-- // nav-pills --> 
                                </div>
                            </div>
                            <!-- // navbar -->
                            <div class="table-tool">
                                <ul class="btn-toolbar pull-left">
                                    <li><a class="btn btn-small btn-glyph"><i class="fugue-table"></i></a></li>
                                    <li><a class="btn btn-small btn-glyph"><i class="fugue-table-pencil"></i></a></li>
                                    <li><a class="btn btn-small btn-glyph"><i class="fugue-table-plus"></i></a></li>
                                    <li class="divider-vertical small"></li>
                                    <li><a class="btn btn-small btn-glyph"><i class="fugue-table-export"></i></a></li>
                                    <li><a class="btn btn-small btn-glyph"><i class="fugue-table-excel"></i></a></li>
                                    <li class="divider-vertical small"></li>
                                    <li><a class="btn btn-boo btn-small" href="javascript:void(0)">button</a></li>
                                    <li><a class="btn btn-boo btn-small" href="javascript:void(0)">button</a></li>
                                </ul>
                                <div class="btn-toolbar pull-right"> <a class="btn btn-boo btn-small" href="javascript:void(0)">button</a> <a class="btn btn-small btn-green " href="javascript:void(0)">NEW Contact</a> </div>
                            </div>
                            <div class="tab-content overflow no-padding">
                                <div class="tab-pane active" id="tab1A">
                                    <table class="table boo-table table-striped table-content table-hover">
                                        <colgroup>
                                        <col>
                                        <col class="col2">
                                        <col>
                                        <col>
                                        <col class="col15">
                                        <col>
                                        </colgroup>
                                        <caption>
                                        More setting for table <span>next elements</span>
                                        </caption>
                                        <thead>
                                            <tr>
                                                <th scope="col" class="check-col"><input type="checkbox" class="checkbox check-all" name="check-all"></th>
                                                <th scope="col">ava</th>
                                                <th scope="col" class="sorting_asc">Full Name <span class="column-sorter"></span></th>
                                                <th scope="col" class="sorting">Email <span class="column-sorter"></span></th>
                                                <th scope="col" class="sorting">Status <span class="column-sorter"></span></th>
                                                <th scope="col" class="sorting">Action <span class="column-sorter"></span></th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr>
                                                <td><input type="checkbox" class="checkbox check-row" value="0" name="checkRow"></td>
                                                <td class="thumb-mini"><div class="media-thumb"> <a href="javascript:void(0);" class="img-shadow"><img src="assets/img/demo/demo-avatar9603.jpg" class="thumb media-object"></a> </div></td>
                                                <td><strong><a class="f16" href="#">Jacob Smith</a></strong> Curabitur vitae leo justo augue </td>
                                                <td>jacob.smith@example.com</td>
                                                <td class="va-middle"><div class="progress progress-info progress-small">
                                                        <div style="width:65%" class="bar"> </div>
                                                    </div></td>
                                                <td class="action"><a class="btn btn-yellow btn-mini no-wrap" href="#">Edit user <i class="fontello-icon-edit"></i></a> <a class="btn btn-green btn-glyph btn-mini" href="#"><i class="fontello-icon-link-4"></i></a></td>
                                            </tr>
                                            <tr>
                                                <td><input type="checkbox" class="checkbox check-row" value="0" name="checkRow"></td>
                                                <td class="thumb-mini"><div class="media-thumb"> <a href="javascript:void(0);" class="img-shadow"><img src="assets/img/demo/demo-avatar9601.jpg" class="thumb media-object"></a> </div></td>
                                                <td><strong><a class="f16" href="#">Isabella Johnson</a></strong> Curabitur vitae leo justo augue </td>
                                                <td>jacob.smith@example.com</td>
                                                <td class="va-middle"><div class="progress progress-info progress-mini filled2">
                                                        <div class="filler">
                                                            <div style="width:65%" class="bar"> </div>
                                                        </div>
                                                    </div></td>
                                                <td class="action"><a class="btn btn-yellow btn-mini no-wrap" href="#">Edit user <i class="fontello-icon-edit"></i></a> <a class="btn btn-green btn-glyph btn-mini" href="#"><i class="fontello-icon-link-4"></i></a></td>
                                            </tr>
                                            <tr>
                                                <td><input type="checkbox" class="checkbox check-row" value="0" name="checkRow"></td>
                                                <td class="thumb-mini"><div class="media-thumb"> <a href="javascript:void(0);" class="img-shadow"><img src="assets/img/demo/demo-avatar9602.jpg" class="thumb media-object"></a> </div></td>
                                                <td><strong><a class="_f16" href="#">Ethan Williams</a></strong> Curabitur vitae leo justo augue </td>
                                                <td>ethan.williams@example.com</td>
                                                <td class="va-middle"><div class="progress progress-success right">
                                                        <div data-amount-total="5000" data-amount-part="3750" class="bar text-filled-5 six-sec-ease-in-out" style="width: 75%;">2500 / 5000</div>
                                                    </div></td>
                                                <td class="action"><a class="btn btn-yellow btn-mini no-wrap" href="#">Edit user <i class="fontello-icon-edit"></i></a> <a class="btn btn-glyph btn-mini" href="#"><i class="fontello-icon-link-4"></i></a></td>
                                            </tr>
                                            <tr>
                                                <td><input type="checkbox" class="checkbox check-row" value="0" name="checkRow"></td>
                                                <td class="thumb-mini"><div class="media-thumb"> <a href="javascript:void(0);" class="img-shadow"><img src="assets/img/demo/demo-avatar9605.jpg" class="thumb media-object"></a> </div></td>
                                                <td><strong><a class="_f16" href="#">Emma Jones</a></strong> Curabitur vitae leo justo augue </td>
                                                <td>emma.jones@example.com</td>
                                                <td class="va-middle"><div class="progress progress-info progress-striped filled3">
                                                        <div class="filler">
                                                            <div style="width:65%" class="bar"> </div>
                                                        </div>
                                                    </div></td>
                                                <td class="action"><a class="btn btn-yellow btn-mini no-wrap" href="#">Edit user <i class="fontello-icon-edit"></i></a> <a class="btn btn-glyph btn-mini" href="#"><i class="fontello-icon-link-4"></i></a></td>
                                            </tr>
                                        </tbody>
                                    </table>
                                    <div class="table-message-info">Here info for table</div>
                                    <div class="action-table">
                                        <div class="btn-toolbar pull-left">
                                            <div class="action-select-wraper"> <span class="arrow-table-action"></span>
                                                <select class="selectpicker-boo input-medium" id="actionTable" name="actionTable">
                                                    <option value="">Action for selected...</option>
                                                    <option value="validate">Validate</option>
                                                    <option value="delete">Delete</option>
                                                </select>
                                                <button class="btn btn-boo" type="submit">Perform the action</button>
                                            </div>
                                        </div>
                                        <ul class="btn-toolbar pull-right">
                                            <li><a class="btn btn-small btn-glyph"><i class="fugue-table"></i></a></li>
                                            <li><a class="btn btn-small btn-glyph"><i class="fugue-table-pencil"></i></a></li>
                                            <li><a class="btn btn-small btn-glyph"><i class="fugue-table-plus"></i></a></li>
                                            <li class="divider-vertical small"></li>
                                            <li><a class="btn btn-small btn-glyph"><i class="fugue-table-export"></i></a></li>
                                            <li><a class="btn btn-small btn-glyph"><i class="fugue-table-excel"></i></a></li>
                                            <li class="divider-vertical small"></li>
                                            <li><a class="btn btn-boo btn-small" href="javascript:void(0)">button</a></li>
                                            <li><a class="btn btn-boo btn-small" href="javascript:void(0)">button</a></li>
                                        </ul>
                                    </div>
                                </div>
                                <!-- // tab1 -->
                                <div class="tab-pane" id="tab2A">
                                    <table class="table boo-table table-light table-content table-hover">
                                        <colgroup>
                                        <col class="col2">
                                        <col class="col2">
                                        <col>
                                        <col>
                                        <col class="col15">
                                        <col>
                                        </colgroup>
                                        <caption>
                                        Here use table-light <span>next elements</span>
                                        </caption>
                                        <thead>
                                            <tr>
                                                <th scope="col" class="check-col"><input type="checkbox" class="checkbox check-all" name="check-all"></th>
                                                <th scope="col">ava</th>
                                                <th scope="col" class="sorting_asc">Full Name <span class="column-sorter"></span></th>
                                                <th scope="col" class="sorting">Email <span class="column-sorter"></span></th>
                                                <th scope="col" class="sorting">Status <span class="column-sorter"></span></th>
                                                <th scope="col" class="sorting">Action <span class="column-sorter"></span></th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr>
                                                <td><input type="checkbox" class="checkbox check-row" value="0" name="checkRow"></td>
                                                <td class="thumb-mini"><div class="media-thumb"> <a href="javascript:void(0);" class="img-shadow"><img src="assets/img/demo/demo-avatar9603.jpg" class="thumb media-object"></a> </div></td>
                                                <td><strong><a class="f16" href="#">Jacob Smith</a></strong> Curabitur vitae leo justo augue </td>
                                                <td>jacob.smith@example.com</td>
                                                <td class="va-middle"><div class="label-field text-right">Completed</div>
                                                    <div class="progress progress-success progress-mini filled2">
                                                        <div class="filler">
                                                            <div style="width:95%" class="bar"> </div>
                                                        </div>
                                                    </div></td>
                                                <td class="action"><a class="btn btn-yellow btn-mini no-wrap" href="#">Edit user <i class="fontello-icon-edit"></i></a> <a class="btn btn-green btn-glyph btn-mini" href="#"><i class="fontello-icon-link-4"></i></a></td>
                                            </tr>
                                            <tr>
                                                <td><input type="checkbox" class="checkbox check-row" value="0" name="checkRow"></td>
                                                <td class="thumb-mini"><div class="media-thumb"> <a href="javascript:void(0);" class="img-shadow"><img src="assets/img/demo/demo-avatar9601.jpg" class="thumb media-object"></a> </div></td>
                                                <td><strong><a class="f16" href="#">Isabella Johnson</a></strong> Curabitur vitae leo justo augue </td>
                                                <td>jacob.smith@example.com</td>
                                                <td class="va-middle"><div class="label-field text-right">Oportunity</div>
                                                    <div class="progress progress-info progress-mini filled2">
                                                        <div class="filler">
                                                            <div style="width:65%" class="bar"> </div>
                                                        </div>
                                                    </div></td>
                                                <td class="action"><a class="btn btn-yellow btn-mini no-wrap" href="#">Edit user <i class="fontello-icon-edit"></i></a> <a class="btn btn-green btn-glyph btn-mini" href="#"><i class="fontello-icon-link-4"></i></a></td>
                                            </tr>
                                            <tr>
                                                <td><input type="checkbox" class="checkbox check-row" value="0" name="checkRow"></td>
                                                <td class="thumb-mini"><div class="media-thumb"> <a href="javascript:void(0);" class="img-shadow"><img src="assets/img/demo/demo-avatar9602.jpg" class="thumb media-object"></a> </div></td>
                                                <td><strong><a class="_f16" href="#">Ethan Williams</a></strong> Curabitur vitae leo justo augue </td>
                                                <td>ethan.williams@example.com</td>
                                                <td class="va-middle"><div class="label-field text-right">Prospect</div>
                                                    <div class="progress progress-info progress-mini filled2">
                                                        <div class="filler">
                                                            <div style="width:50%" class="bar"> </div>
                                                        </div>
                                                    </div></td>
                                                <td class="action"><a class="btn btn-yellow btn-mini no-wrap" href="#">Edit user <i class="fontello-icon-edit"></i></a> <a class="btn btn-glyph btn-mini" href="#"><i class="fontello-icon-link-4"></i></a></td>
                                            </tr>
                                            <tr>
                                                <td><input type="checkbox" class="checkbox check-row" value="0" name="checkRow"></td>
                                                <td class="thumb-mini"><div class="media-thumb"> <a href="javascript:void(0);" class="img-shadow"><img src="assets/img/demo/demo-avatar9605.jpg" class="thumb media-object"></a> </div></td>
                                                <td><strong><a class="_f16" href="#">Emma Jones</a></strong> Curabitur vitae leo justo augue </td>
                                                <td>emma.jones@example.com</td>
                                                <td class="va-middle"><div class="label-field text-right">Not</div>
                                                    <div class="progress progress-danger progress-mini filled2">
                                                        <div class="filler">
                                                            <div style="width:15%" class="bar"> </div>
                                                        </div>
                                                    </div></td>
                                                <td class="action"><a class="btn btn-yellow btn-mini no-wrap" href="#">Edit user <i class="fontello-icon-edit"></i></a> <a class="btn btn-glyph btn-mini" href="#"><i class="fontello-icon-link-4"></i></a></td>
                                            </tr>
                                        </tbody>
                                    </table>
                                    <div class="action-table">
                                        <div class="btn-toolbar pull-left">
                                            <div class="action-select-wraper"> <span class="arrow-table-action"></span>
                                                <select class="selecttwo" id="actionTableDemo1" name="actionTableDemo1" data-placeholder="Action for selected...">
                                                    <option value=""></option>
                                                    <option value="check-all">Check all</option>
                                                    <option value="uncheck">Uncheck selected</option>
                                                    <option value="uncheck-all">Uncheck all</option>
                                                    <option value="validate">Validate</option>
                                                    <option value="delete">Delete</option>
                                                </select>
                                                <button class="btn btn-boo" type="submit">Perform the action</button>
                                            </div>
                                        </div>
                                        <!-- // btn-toolbar -->
                                        
                                        <div class="pagination pagination-boo">
                                            <ul>
                                                <li class="disabled"><a href="#">Prev</a></li>
                                                <li><a href="#">1</a></li>
                                                <li class="active"><a href="#">2</a></li>
                                                <li><a href="#">3</a></li>
                                                <li><a href="#">4</a></li>
                                                <li><a href="#">Next</a></li>
                                            </ul>
                                        </div>
                                        <!-- // pagination -->
                                        
                                    </div>
                                    <!-- // Action for table -->
                                    
                                </div>
                                <!-- // tab2 --> 
                            </div>
                            <!-- // tabs --> 
                        </div>
                        <!-- // Boo color table nav-pills -->
                        <div class="clearfix margin-xx"><!-- // only demo separator --></div>
                    </div>
                    <!-- // Example row --> 
                </section>
                <section>
                    <div class="page-header">
                        <h3><i class="opaci35 aweso-icon-table"></i> boo table <small>wraped in widget</small></h3>
                        <p>Widget is used for the DataTable. This is a demo application styles. Functional examples are <a href="component-table-datatable.html">DataTable page</a></p>
                    </div>
                    <div class="row-fluid">
                        <div class="span8 grider">
                            <div class="widget widget-simple widget-table">
                                <div class="widget-header">
                                    <h4><i class="aweso-icon-table"></i> table in widget <small>.widget-simple</small></h4>
                                </div>
                                <!-- // widget-header -->
                                <table class="table table-striped table-condensed table-content boo-table">
                                    <thead>
                                        <tr>
                                            <th scope="col" class="check-col" ><input type="checkbox" class="checkbox check-all" value="all" name="check-all"></th>
                                            <th scope="col" class="sorting_asc">ID <span class="column-sorter"></span></th>
                                            <th scope="col" class="sorting">Name <span class="column-sorter"></span></th>
                                            <th scope="col" class="sorting">City <span class="column-sorter"></span></th>
                                            <th scope="col" class="sorting hidden-phone hidden-tablet">Email <span class="column-sorter"></span></th>
                                            <th scope="col" class="sorting">Date of birth <span class="column-sorter"></span></th>
                                            <th scope="col" class="action">Action</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td><input type="checkbox" class="checkbox"></td>
                                            <td>1</td>
                                            <td>Colin Nixon</td>
                                            <td>Long Beach</td>
                                            <td class="hidden-phone hidden-tablet"><a href="mailto:semper@diamSeddiam.edu">semper@diamSeddiam.edu</a></td>
                                            <td>02/10/1986</td>
                                            <td class="action"><a class="icon" href="#"><i class="fugue-magnifier" title="detail"></i></a> <a class="icon" href="#"><i class="fugue-pencil" title="edit"></i></a> <a class="icon" href="#"><i class="fugue-cross-circle" title="delete"></i></a></td>
                                        </tr>
                                        <tr>
                                            <td><input type="checkbox" class="checkbox"></td>
                                            <td>2</td>
                                            <td>Naida Bennett</td>
                                            <td>Lockport</td>
                                            <td class="hidden-phone hidden-tablet"><a href="mailto:commodo@conseque.ca">commodo@conseque.ca</a></td>
                                            <td>04/21/1959</td>
                                            <td class="action"><a class="icon" href="#"><i class="fugue-magnifier" title="detail"></i></a> <a class="icon" href="#"><i class="fugue-pencil" title="edit"></i></a> <a class="icon" href="#"><i class="fugue-cross-circle" title="delete"></i></a></td>
                                        </tr>
                                        <tr>
                                            <td><input type="checkbox" class="checkbox"></td>
                                            <td>3</td>
                                            <td>Danielle Myers</td>
                                            <td>Bentonville</td>
                                            <td class="hidden-phone hidden-tablet"><a href="mailto:nunc.sed@liberoInteger.ca">nunc.sed@liberoInteger.ca</a></td>
                                            <td>12/11/1971</td>
                                            <td class="action"><a class="icon" href="#"><i class="fugue-magnifier" title="detail"></i></a> <a class="icon" href="#"><i class="fugue-pencil" title="edit"></i></a> <a class="icon" href="#"><i class="fugue-cross-circle" title="delete"></i></a></td>
                                        </tr>
                                        <tr>
                                            <td><input type="checkbox" class="checkbox"></td>
                                            <td>4</td>
                                            <td>Whitney Jones</td>
                                            <td>Troy</td>
                                            <td class="hidden-phone hidden-tablet"><a href="mailto:nunc@sedliberoproin.edu">nunc@sedliberoproin.edu</a></td>
                                            <td>08/09/1976</td>
                                            <td class="action"><a class="icon" href="#"><i class="fugue-magnifier" title="detail"></i></a> <a class="icon" href="#"><i class="fugue-pencil" title="edit"></i></a> <a class="icon" href="#"><i class="fugue-cross-circle" title="delete"></i></a></td>
                                        </tr>
                                        <tr>
                                            <td><input type="checkbox" class="checkbox"></td>
                                            <td>5</td>
                                            <td>Marvin Bell</td>
                                            <td>Cody</td>
                                            <td class="hidden-phone hidden-tablet"><a href="mailto:aliquet@craspellentesque.com">aliquet@craspellentesque.com</a></td>
                                            <td>10/17/1979</td>
                                            <td class="action"><a class="icon" href="#"><i class="fugue-magnifier" title="detail"></i></a> <a class="icon" href="#"><i class="fugue-pencil" title="edit"></i></a> <a class="icon" href="#"><i class="fugue-cross-circle" title="delete"></i></a></td>
                                        </tr>
                                    </tbody>
                                </table>
                                <!-- // table -->
                                <div class="widget-footer">
                                    <div class="btn-toolbar pull-left">
                                        <div class="action-select-wraper"> <span class="arrow-table-action"></span>
                                            <select class="selecttwo" id="actionTableDemo2" name="actionTableDemo2" data-placeholder="Action for selected...">
                                                <option value=""></option>
                                                <option value="check-all">Check all</option>
                                                <option value="uncheck">Uncheck selected</option>
                                                <option value="uncheck-all">Uncheck all</option>
                                                <option value="validate">Validate</option>
                                                <option value="delete">Delete</option>
                                            </select>
                                            <button type="submit" class="btn">Perform the action</button>
                                        </div>
                                    </div>
                                    <div class="pagination pagination-btn pull-right">
                                        <ul>
                                            <li class="disabled"><a href="#">Prev</a></li>
                                            <li><a href="#">1</a></li>
                                            <li class="active"><a href="#">2</a></li>
                                            <li><a href="#">3</a></li>
                                            <li><a href="#">4</a></li>
                                            <li><a href="#">Next</a></li>
                                        </ul>
                                    </div>
                                    <!-- // pagination -->
                                </div>
                                <!-- // widget-footer -->
                            </div>
                            <!-- // Table in widge-box -->
                            
                            <div class="widget widget-box widget-table">
                                <div class="widget-header">
                                    <h4><i class="aweso-icon-table"></i> table in widget <small>.widget-box</small></h4>
                                </div>
                                <!-- // widget-header -->
                                <table class="table table-striped table-condensed table-content boo-table">
                                    <thead>
                                        <tr>
                                            <th scope="col" class="check-col" ><input type="checkbox" class="checkbox check-all" value="all" name="check-all"></th>
                                            <th scope="col" class="sorting_desc">Name <span class="column-sorter"></span></th>
                                            <th scope="col" class="sorting">Adresse <span class="column-sorter"></span></th>
                                            <th scope="col" class="action">Action</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td><input type="checkbox" class="checkbox" value="1" name="check1"></td>
                                            <td>Colin Nixon</td>
                                            <td>6890 East Spring Street, Unit 2L Long Beach, California 90815, USA</td>
                                            <td class="action"><a class="btn btn-yellow btn-mini" href="#">detail</a></td>
                                        </tr>
                                        <tr>
                                            <td><input type="checkbox" class="checkbox" value="1" name="check1"></td>
                                            <td>Naida Bennett</td>
                                            <td>597 Washburn St, Lockport, NY 14094, USA</td>
                                            <td class="action"><a class="btn btn-yellow btn-mini" href="#">detail</a></td>
                                        </tr>
                                        <tr>
                                            <td><input type="checkbox" class="checkbox" value="1" name="check1"></td>
                                            <td>Danielle Myers</td>
                                            <td>2679 Magellan Blvd 72712 Bentonville, USA</td>
                                            <td class="action"><a class="btn btn-yellow btn-mini" href="#">detail</a></td>
                                        </tr>
                                        <tr>
                                            <td><input type="checkbox" class="checkbox" value="1" name="check1"></td>
                                            <td>Whitney Jones</td>
                                            <td>4058 Livernois Rd 48098 Troy United States</td>
                                            <td class="action"><a class="btn btn-yellow btn-mini" href="#">detail</a></td>
                                        </tr>
                                        <tr>
                                            <td><input type="checkbox" class="checkbox" value="1" name="check1"></td>
                                            <td>Marvin Bell</td>
                                            <td>456 Yellowstone Avenue, Cody Wy Us 82414, Cody, WY, 82414 USA</td>
                                            <td class="action"><a class="btn btn-yellow btn-mini" href="#">detail</a></td>
                                        </tr>
                                    </tbody>
                                </table>
                                <!-- // table -->
                                <div class="widget-footer">
                                    <div class="btn-toolbar pull-left">
                                        <div class="action-select-wraper"> <span class="arrow-table-action"></span>
                                            <select class="selecttwo" id="actionTableDemo3" name="actionTableDemo3" data-placeholder="Action for selected...">
                                                <option value=""></option>
                                                <option value="check-all">Check all</option>
                                                <option value="uncheck">Uncheck selected</option>
                                                <option value="uncheck-all">Uncheck all</option>
                                                <option value="validate">Validate</option>
                                                <option value="delete">Delete</option>
                                            </select>
                                            <button type="submit" class="btn btn-green">Perform the action</button>
                                        </div>
                                    </div>
                                    <div class="pagination pagination-boo pull-right">
                                        <ul>
                                            <li class="disabled"><a href="#">Prev</a></li>
                                            <li><a href="#">1</a></li>
                                            <li class="active"><a href="#">2</a></li>
                                            <li><a href="#">3</a></li>
                                            <li><a href="#">4</a></li>
                                            <li><a href="#">Next</a></li>
                                        </ul>
                                    </div>
                                    <!-- // pagination -->
                                </div>
                                <!-- // widget-footer -->
                            </div>
                            <!-- // Table in widge-box -->
                            
                            <div class="widget widget-simple">
                                <div class="widget-header header-small">
                                    <h4>widget-simple <small>no class widget-table</small></h4>
                                    <div class="table-tool-wrapper">
                                        <ul class="btn-toolbar pull-right">
                                            <li><a class="btn btn-small btn-glyph"><i class="fugue-table"></i></a></li>
                                            <li><a class="btn btn-small btn-glyph"><i class="fugue-table-pencil"></i> Table</a></li>
                                            <li><a class="btn btn-small btn-glyph"><i class="fugue-table-plus"></i></a></li>
                                            <li class="divider-vertical"></li>
                                            <li><a class="btn btn-small btn-glyph"><i class="fugue-table-export"></i></a></li>
                                            <li><a class="btn btn-small btn-glyph"><i class="fugue-table-excel"></i></a></li>
                                            <li class="divider-vertical"></li>
                                            <li><a class="btn btn-small btn-glyph" href="javascript:void(0)"><i class="fugue-arrow-circle"></i></a></li>
                                        </ul>
                                    </div>
                                </div>
                                <table class="table boo-table table-condensed table-striped table-content table-hover bg-green-light">
                                    <caption>
                                    For header use <span>.header-small</span>
                                    </caption>
                                    <thead>
                                        <tr id="HeadersRow0">
                                            <th scope="col">Order ID</th>
                                            <th scope="col">Customer ID</th>
                                            <th scope="col" class="hidden-phone">Employee ID</th>
                                            <th scope="col" class="hidden-phone">Order Date</th>
                                            <th scope="col" class="hidden-phone hidden-tablet">Required Date</th>
                                            <th scope="col">Shipped Date</th>
                                            <th scope="col">Costs</th>
                                        </tr>
                                    </thead>
                                    <tfoot>
                                        <tr id="HeadersRow0" class="total">
                                            <th>Total sum</th>
                                            <th></th>
                                            <th class="hidden-phone"></th>
                                            <th class="hidden-phone"></th>
                                            <th class="hidden-phone hidden-tablet"></th>
                                            <th></th>
                                            <th class="text-right">202.46</th>
                                        </tr>
                                    </tfoot>
                                    <tbody>
                                        <tr id="DataRow0">
                                            <td class="bold"><a href="#">10248</a></td>
                                            <td>VINET</td>
                                            <td class="hidden-phone">Buchanan</td>
                                            <td class="hidden-phone">8/4/2012</td>
                                            <td class="hidden-phone hidden-tablet">9/1/2012</td>
                                            <td>8/16/2012</td>
                                            <td class="text-right">32.38</td>
                                        </tr>
                                        <tr id="DataRow1">
                                            <td class="bold"><a href="#">10249</a></td>
                                            <td>TOMSP</td>
                                            <td class="hidden-phone">Suyama</td>
                                            <td class="hidden-phone">8/5/2012</td>
                                            <td class="hidden-phone hidden-tablet">9/16/2012</td>
                                            <td>8/10/2012</td>
                                            <td class="text-right">11.61</td>
                                        </tr>
                                        <tr id="DataRow2">
                                            <td class="bold"><a href="#">10250</a></td>
                                            <td>HANAR</td>
                                            <td class="hidden-phone">Peacock</td>
                                            <td class="hidden-phone">8/8/2012</td>
                                            <td class="hidden-phone hidden-tablet">9/5/2012</td>
                                            <td>8/12/2012</td>
                                            <td class="text-right">65.83</td>
                                        </tr>
                                        <tr id="DataRow3">
                                            <td class="bold"><a href="#">10251</a></td>
                                            <td>VICTE</td>
                                            <td class="hidden-phone">Leverling</td>
                                            <td class="hidden-phone">8/8/2012</td>
                                            <td class="hidden-phone hidden-tablet">9/5/2012</td>
                                            <td>8/15/2012</td>
                                            <td class="text-right">41.34</td>
                                        </tr>
                                        <tr id="DataRow4">
                                            <td class="bold"><a href="#">10252</a></td>
                                            <td>SUPRD</td>
                                            <td class="hidden-phone">Peacock</td>
                                            <td class="hidden-phone">8/9/2012</td>
                                            <td class="hidden-phone hidden-tablet">9/6/2012</td>
                                            <td>8/11/2012</td>
                                            <td class="text-right">51.3</td>
                                        </tr>
                                    </tbody>
                                </table>
                                <div class="widget-footer"><p>Footer for widget</p></div>
                                <!-- // widget-footer -->
                            </div>
                            <!-- // Table in widge-box --> 
                        </div>
                        <!-- // Column -->
                        
                        <div class="span4 grider">
                            <div class="well well-box well-nice">
                                <div class="navbar">
                                    <div class="navbar-inner no-bg">
                                        <h4 class="title"><i class="fontello-icon-window"></i> Basic classes for widgets</h4>
                                    </div>
                                </div>
                                <!-- // navbar -->
                                <div class="section-content-table">
                                    <table class="table table-striped table-content">
                                        <colgroup>
                                        <col class="col35">
                                        <col class="col65">
                                        </colgroup>
                                        <thead>
                                            <tr>
                                                <th>class</th>
                                                <th>description</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr>
                                                <td><code>.widget</code></td>
                                                <td>boo element</td>
                                            </tr>
                                            <tr>
                                                <td><code>.widget-simple</code></td>
                                                <td>style for widget</td>
                                            </tr>
                                            <tr>
                                                <td><code>.widget-box</code></td>
                                                <td>style for widget</td>
                                            </tr>
                                            <tr>
                                                <td><code>.widget-table</code></td>
                                                <td>style for table in widget</td>
                                            </tr>
                                            <tr>
                                                <td><code>.widget-header</code></td>
                                                <td>heading for widget</td>
                                            </tr>
                                            <tr>
                                                <td><code>.widget-footer</code></td>
                                                <td>footer for widget</td>
                                            </tr>
                                            <tr>
                                                <td><code>.table-tool-wrapper</code></td>
                                                <td>wrap for tool in header (align left or right)</td>
                                            </tr>
                                            <tr>
                                                <td><code>.btn-toolbar</code></td>
                                                <td>bootstrap element - use for bar to <code>ul</code> or <code>div</code></td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                                <!-- // table-content --> 
                            </div>
                            <pre class="prettyprint linenums">
&lt;!-- widget-simple --&gt;
&lt;div class="widget widget-simple widget-table"&gt;
    &lt;div class="widget-header"&gt;
        &lt;h4&gt; ... &lt;/h4&gt;
        &lt;div class="table-tool-wrapper"&gt;
            &lt;ul class="btn-toolbar pull-right"&gt;
                ...
            &lt;/ul&gt;
        &lt;/div&gt;
    &lt;/div&gt;
    &lt;table class="table boo-table table-striped ..."&gt;
        ...
    &lt;/table&gt;
    &lt;div class="widget-footer"&gt;
        &lt;div class="btn-toolbar"&gt;
            ...
        &lt;/div&gt;
        &lt;div class="pagination pagination-btn pull-right"&gt;
            ...
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;

&lt;!-- widget-box --&gt;
&lt;div class="widget widget-box widget-table"&gt;
</pre>

                        </div>
                        <!-- // Column --> 
                        
                    </div>
                    <!-- // Example row --> 
                    
                </section>
                <!-- // section table -->
                
                <section>
                    <div class="page-header">
                        <h3><i class="aweso-icon-table opaci35"></i> Table wraped in widget <small> add color background</small></h3>
                    </div>
                    <p>Table in widget-box <code>.bg-blue-medium </code></p>
                    <div class="row-fluid">
                        <div class="span4">
                            <div class="widget widget-box widget-table">
                                <div class="widget-header">
                                    <h4>widget box </h4>
                                </div>
                                <div class="widget-content"> 
                                    <!-- TABLE - background color - blue-light -->
                                    <table class="table boo-table table-condensed table-content bg-blue-light">
                                        <caption>
                                        Caption - Table Title
                                        </caption>
                                        <thead>
                                            <tr>
                                                <th>Full Name</th>
                                                <th>Phone</th>
                                                <th>Action</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr>
                                                <td>Jacob Smith</td>
                                                <td>jacob.smith@example.com</td>
                                                <td><a class="btn btn-yellow btn-mini" href="#">Edit</a></td>
                                            </tr>
                                            <tr>
                                                <td>Isabella Johnson</td>
                                                <td>jacob.smith@example.com</td>
                                                <td><a class="btn btn-yellow btn-mini" href="#">Edit</a></td>
                                            </tr>
                                            <tr>
                                                <td>Ethan Williams</td>
                                                <td>ethan.williams@example.com</td>
                                                <td><a class="btn btn-yellow btn-mini" href="#">Edit</a></td>
                                            </tr>
                                            <tr>
                                                <td>Emma Jones</td>
                                                <td>emma.jones@example.com</td>
                                                <td><a class="btn btn-yellow btn-mini" href="#">Edit</a></td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                                <div class="widget-footer"> </div>
                            </div>
                            <!-- // Table in widget-box --> 
                            
                        </div>
                        <!-- // Column -->
                        
                        <div class="span4">
                            <div class="widget widget-box widget-table">
                                <div class="widget-header">
                                    <h4>widget box </h4>
                                </div>
                                <div class="widget-content"> 
                                    <!-- TABLE - background color - green-light -->
                                    <table class="table boo-table table-condensed table-content bg-green-light">
                                        <caption>
                                        Caption - Table Title
                                        </caption>
                                        <thead>
                                            <tr>
                                                <th>Full Name</th>
                                                <th>Phone</th>
                                                <th>Action</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr>
                                                <td>Jacob Smith</td>
                                                <td>jacob.smith@example.com</td>
                                                <td><a class="btn btn-green btn-mini" href="#">Edit</a></td>
                                            </tr>
                                            <tr>
                                                <td>Isabella Johnson</td>
                                                <td>jacob.smith@example.com</td>
                                                <td><a class="btn btn-green btn-mini" href="#">Edit</a></td>
                                            </tr>
                                            <tr>
                                                <td>Ethan Williams</td>
                                                <td>ethan.williams@example.com</td>
                                                <td><a class="btn btn-green btn-mini" href="#">Edit</a></td>
                                            </tr>
                                            <tr>
                                                <td>Emma Jones</td>
                                                <td>emma.jones@example.com</td>
                                                <td><a class="btn btn-green btn-mini" href="#">Edit</a></td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                                <div class="widget-footer"> </div>
                            </div>
                            <!-- // Table in widget-box --> 
                            
                        </div>
                        <!-- // Column -->
                        
                        <div class="span4">
                            <div class="widget widget-box widget-table">
                                <div class="widget-header">
                                    <h4>widget box </h4>
                                </div>
                                <div class="widget-content"> 
                                    <!-- TABLE - background color - yellow-light -->
                                    <table class="table boo-table table-condensed table-content bg-yellow-light">
                                        <caption>
                                        Caption - Table Title
                                        </caption>
                                        <thead>
                                            <tr>
                                                <th>Full Name</th>
                                                <th>Phone</th>
                                                <th>Action</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr>
                                                <td>Jacob Smith</td>
                                                <td>jacob.smith@example.com</td>
                                                <td><a class="btn btn-blue btn-mini" href="#">Edit</a></td>
                                            </tr>
                                            <tr>
                                                <td>Isabella Johnson</td>
                                                <td>jacob.smith@example.com</td>
                                                <td><a class="btn btn-blue btn-mini" href="#">Edit</a></td>
                                            </tr>
                                            <tr>
                                                <td>Ethan Williams</td>
                                                <td>ethan.williams@example.com</td>
                                                <td><a class="btn btn-blue btn-mini" href="#">Edit</a></td>
                                            </tr>
                                            <tr>
                                                <td>Emma Jones</td>
                                                <td>emma.jones@example.com</td>
                                                <td><a class="btn btn-blue btn-mini" href="#">Edit</a></td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                                <div class="widget-footer"> </div>
                            </div>
                            <!-- // Table in widget-box --> 
                            
                        </div>
                        <!-- // Column --> 
                        
                    </div>
                    <!-- // Example row -->
                    
                    <p>Table in widget-simple <code>.table-striped .bg-blue-medium </code></p>
                    <div class="row-fluid">
                        <div class="span4">
                            <div class="widget widget-simple widget-table">
                                <div class="widget-header no-border">
                                    <h4>widget simple </h4>
                                </div>
                                <div class="widget-content"> 
                                    <!-- TABLE - background color - blue-medium -->
                                    <table class="table boo-table table-condensed table-content table-striped bg-blue-medium">
                                        <caption>
                                        Caption - Table Title
                                        </caption>
                                        <thead>
                                            <tr>
                                                <th>Full Name</th>
                                                <th>Phone</th>
                                                <th>Action</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr>
                                                <td>Jacob Smith</td>
                                                <td>jacob.smith@example.com</td>
                                                <td><a class="btn btn-yellow btn-mini" href="#">Edit</a></td>
                                            </tr>
                                            <tr>
                                                <td>Isabella Johnson</td>
                                                <td>jacob.smith@example.com</td>
                                                <td><a class="btn btn-yellow btn-mini" href="#">Edit</a></td>
                                            </tr>
                                            <tr>
                                                <td>Ethan Williams</td>
                                                <td>ethan.williams@example.com</td>
                                                <td><a class="btn btn-yellow btn-mini" href="#">Edit</a></td>
                                            </tr>
                                            <tr>
                                                <td>Emma Jones</td>
                                                <td>emma.jones@example.com</td>
                                                <td><a class="btn btn-yellow btn-mini" href="#">Edit</a></td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                                <div class="widget-footer"> </div>
                            </div>
                            <!-- // Table in widget-box --> 
                        </div>
                        <!-- // Column -->
                        
                        <div class="span4">
                            <div class="widget widget-simple widget-table">
                                <div class="widget-header no-border">
                                    <h4>widget simple </h4>
                                </div>
                                <div class="widget-content"> 
                                    <!-- TABLE - background color - green-medium -->
                                    <table class="table boo-table table-condensed table-content table-striped bg-green-medium">
                                        <caption>
                                        Caption - Table Title
                                        </caption>
                                        <thead>
                                            <tr>
                                                <th>Full Name</th>
                                                <th>Phone</th>
                                                <th>Action</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr>
                                                <td>Jacob Smith</td>
                                                <td>jacob.smith@example.com</td>
                                                <td><a class="btn btn-green btn-mini" href="#">Edit</a></td>
                                            </tr>
                                            <tr>
                                                <td>Isabella Johnson</td>
                                                <td>jacob.smith@example.com</td>
                                                <td><a class="btn btn-green btn-mini" href="#">Edit</a></td>
                                            </tr>
                                            <tr>
                                                <td>Ethan Williams</td>
                                                <td>ethan.williams@example.com</td>
                                                <td><a class="btn btn-green btn-mini" href="#">Edit</a></td>
                                            </tr>
                                            <tr>
                                                <td>Emma Jones</td>
                                                <td>emma.jones@example.com</td>
                                                <td><a class="btn btn-green btn-mini" href="#">Edit</a></td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                                <div class="widget-footer"> </div>
                            </div>
                            <!-- // Table in widget-box --> 
                        </div>
                        <!-- // Column -->
                        
                        <div class="span4">
                            <div class="widget widget-simple widget-table">
                                <div class="widget-header no-border">
                                    <h4>widget simple </h4>
                                </div>
                                <div class="widget-content"> 
                                    <!-- TABLE - background color - yellow-medium -->
                                    <table class="table boo-table table-condensed table-content table-striped bg-yellow-medium">
                                        <caption>
                                        Caption - Table Title
                                        </caption>
                                        <thead>
                                            <tr>
                                                <th>Full Name</th>
                                                <th>Phone</th>
                                                <th>Action</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr>
                                                <td>Jacob Smith</td>
                                                <td>jacob.smith@example.com</td>
                                                <td><a class="btn btn-blue btn-mini" href="#">Edit</a></td>
                                            </tr>
                                            <tr>
                                                <td>Isabella Johnson</td>
                                                <td>jacob.smith@example.com</td>
                                                <td><a class="btn btn-blue btn-mini" href="#">Edit</a></td>
                                            </tr>
                                            <tr>
                                                <td>Ethan Williams</td>
                                                <td>ethan.williams@example.com</td>
                                                <td><a class="btn btn-blue btn-mini" href="#">Edit</a></td>
                                            </tr>
                                            <tr>
                                                <td>Emma Jones</td>
                                                <td>emma.jones@example.com</td>
                                                <td><a class="btn btn-blue btn-mini" href="#">Edit</a></td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                                <div class="widget-footer"> </div>
                            </div>
                            <!-- // Table in widget-box --> 
                        </div>
                        <!-- // Column --> 
                        
                    </div>
                    <!-- // Example row --> 
                    
                </section>
                <!-- // section table --> 
                
                <section>
                    <div class="page-header">
                        <h3><i class="aweso-icon-table opaci35"></i> Other variants for <small>well-nice</small></h3>
                    </div>
                    <div class="row-fluid">
                        <div class="span6">
                            <div class="well well-nice">
                                <table class="table table-condensed table-hover margin-00">
                                    <caption>
                                    Default Table Caption - Title for table <span>Here text in span</span>
                                    </caption>
                                    <thead>
                                        <tr>
                                            <th scope="col">ID</th>
                                            <th scope="col">Name</th>
                                            <th scope="col" class="hidden-phone">City</th>
                                            <th scope="col" class="hidden-tablet hidden-phone">Email</th>
                                            <th scope="col">Date of birth</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td>1</td>
                                            <td>Colin Nixon</td>
                                            <td class="hidden-phone">Long Beach</td>
                                            <td class="hidden-tablet hidden-phone">semper@diamSeddiam.edu</td>
                                            <td>02/10/1986</td>
                                        </tr>
                                        <tr>
                                            <td>2</td>
                                            <td>Naida Bennett</td>
                                            <td class="hidden-phone">Lockport</td>
                                            <td class="hidden-tablet hidden-phone">commodo@conseque.ca</td>
                                            <td>04/21/1959</td>
                                        </tr>
                                        <tr>
                                            <td>3</td>
                                            <td>Danielle Myers</td>
                                            <td class="hidden-phone">Bentonville</td>
                                            <td class="hidden-tablet hidden-phone">nunc.sed@liberoInteger.ca</td>
                                            <td>12/11/1971</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                            <!-- // Table in well-nice --> 
                            
                        </div>
                        <!-- // Column --> 
                        
                        <div class="span6">
                            <div class="well well-nice well-impressed">
                                <table class="table table-condensed table-content table-hover">
                                    <caption>
                                    Default Table Caption - Title for table <span>Here text in span</span>
                                    </caption>
                                    <thead>
                                        <tr>
                                            <th scope="col">ID</th>
                                            <th scope="col">Name</th>
                                            <th scope="col" class="hidden-phone">City</th>
                                            <th scope="col" class="hidden-tablet hidden-phone">Email</th>
                                            <th scope="col">Date of birth</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td>1</td>
                                            <td>Colin Nixon</td>
                                            <td class="hidden-phone">Long Beach</td>
                                            <td class="hidden-tablet hidden-phone">semper@diamSeddiam.edu</td>
                                            <td>02/10/1986</td>
                                        </tr>
                                        <tr>
                                            <td>2</td>
                                            <td>Naida Bennett</td>
                                            <td class="hidden-phone">Lockport</td>
                                            <td class="hidden-tablet hidden-phone">commodo@conseque.ca</td>
                                            <td>04/21/1959</td>
                                        </tr>
                                        <tr>
                                            <td>3</td>
                                            <td>Danielle Myers</td>
                                            <td class="hidden-phone">Bentonville</td>
                                            <td class="hidden-tablet hidden-phone">nunc.sed@liberoInteger.ca</td>
                                            <td>12/11/1971</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                            <!-- // Table in well-nice --> 
                            
                        </div>
                        <!-- // Column --> 
                        
                    </div>
                    <!-- // Example row -->
                    
                    <div class="row-fluid">
                        <div class="span6">
                            <div class="well well-nice well-impressed">
                                <table class="table table-condensed table-bordered table-hover margin-00">
                                    <caption>
                                    Default Table Caption - Title for table <span>Here text in span</span>
                                    </caption>
                                    <thead>
                                        <tr>
                                            <th scope="col">ID</th>
                                            <th scope="col">Name</th>
                                            <th scope="col" class="hidden-phone">City</th>
                                            <th scope="col" class="hidden-tablet hidden-phone">Email</th>
                                            <th scope="col">Date of birth</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td>1</td>
                                            <td>Colin Nixon</td>
                                            <td class="hidden-phone">Long Beach</td>
                                            <td class="hidden-tablet hidden-phone">semper@diamSeddiam.edu</td>
                                            <td>02/10/1986</td>
                                        </tr>
                                        <tr>
                                            <td>2</td>
                                            <td>Naida Bennett</td>
                                            <td class="hidden-phone">Lockport</td>
                                            <td class="hidden-tablet hidden-phone">commodo@conseque.ca</td>
                                            <td>04/21/1959</td>
                                        </tr>
                                        <tr>
                                            <td>3</td>
                                            <td>Danielle Myers</td>
                                            <td class="hidden-phone">Bentonville</td>
                                            <td class="hidden-tablet hidden-phone">nunc.sed@liberoInteger.ca</td>
                                            <td>12/11/1971</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                            <!-- // Table in well-nice --> 
                            
                        </div>
                        <!-- // Column --> 
                        
                        <div class="span6">
                            <div class="well well-nice bg-wite">
                                <table class="table table-condensed table-content table-light table-hover">
                                    <caption>
                                    Default Table Caption - Title for table <span>Here text in span</span>
                                    </caption>
                                    <thead>
                                        <tr>
                                            <th scope="col">ID</th>
                                            <th scope="col">Name</th>
                                            <th scope="col" class="hidden-phone">City</th>
                                            <th scope="col" class="hidden-tablet hidden-phone">Email</th>
                                            <th scope="col">Date of birth</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td>1</td>
                                            <td>Colin Nixon</td>
                                            <td class="hidden-phone">Long Beach</td>
                                            <td class="hidden-tablet hidden-phone">semper@diamSeddiam.edu</td>
                                            <td>02/10/1986</td>
                                        </tr>
                                        <tr>
                                            <td>2</td>
                                            <td>Naida Bennett</td>
                                            <td class="hidden-phone">Lockport</td>
                                            <td class="hidden-tablet hidden-phone">commodo@conseque.ca</td>
                                            <td>04/21/1959</td>
                                        </tr>
                                        <tr>
                                            <td>3</td>
                                            <td>Danielle Myers</td>
                                            <td class="hidden-phone">Bentonville</td>
                                            <td class="hidden-tablet hidden-phone">nunc.sed@liberoInteger.ca</td>
                                            <td>12/11/1971</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                            <!-- // Table in well-nice --> 
                            
                        </div>
                        <!-- // Column --> 
                        
                    </div>
                    <!-- // Example row --> 
                    
                </section>
                <!-- // section table -->
                
                <section id="tableStriped">
                    <div class="page-header">
                        <h3><i class="aweso-icon-table opaci35"></i> Other variants for <small>well-black </small></h3>
                    </div>
                    <div class="row-fluid">
                        <div class="span6">
                            <div class="well well-black">
                                <table class="table boo-table table-condensed table-hover margin-00">
                                    <caption>
                                    Default Table Caption - Title for table <span>Here text in span</span>
                                    </caption>
                                    <thead>
                                        <tr>
                                            <th scope="col">ID</th>
                                            <th scope="col">Name</th>
                                            <th scope="col" class="hidden-phone">City</th>
                                            <th scope="col" class="hidden-tablet hidden-phone">Email</th>
                                            <th scope="col">Date of birth</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td>1</td>
                                            <td>Colin Nixon</td>
                                            <td class="hidden-phone">Long Beach</td>
                                            <td class="hidden-tablet hidden-phone">semper@diamSeddiam.edu</td>
                                            <td>02/10/1986</td>
                                        </tr>
                                        <tr>
                                            <td>2</td>
                                            <td>Naida Bennett</td>
                                            <td class="hidden-phone">Lockport</td>
                                            <td class="hidden-tablet hidden-phone">commodo@conseque.ca</td>
                                            <td>04/21/1959</td>
                                        </tr>
                                        <tr>
                                            <td>3</td>
                                            <td>Danielle Myers</td>
                                            <td class="hidden-phone">Bentonville</td>
                                            <td class="hidden-tablet hidden-phone">nunc.sed@liberoInteger.ca</td>
                                            <td>12/11/1971</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                            <!-- // Table in well-black --> 
                            
                        </div>
                        <!-- // Column -->
                        
                        <div class="span6">
                            <div class="well well-black well-impressed">
                                <table class="table boo-table table-condensed table-content table-hover">
                                    <caption>
                                    Default Table Caption - Title for table <span>Here text in span</span>
                                    </caption>
                                    <thead>
                                        <tr>
                                            <th scope="col">ID</th>
                                            <th scope="col">Name</th>
                                            <th scope="col" class="hidden-phone">City</th>
                                            <th scope="col" class="hidden-tablet hidden-phone">Email</th>
                                            <th scope="col">Date of birth</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td>1</td>
                                            <td>Colin Nixon</td>
                                            <td class="hidden-phone">Long Beach</td>
                                            <td class="hidden-tablet hidden-phone">semper@diamSeddiam.edu</td>
                                            <td>02/10/1986</td>
                                        </tr>
                                        <tr>
                                            <td>2</td>
                                            <td>Naida Bennett</td>
                                            <td class="hidden-phone">Lockport</td>
                                            <td class="hidden-tablet hidden-phone">commodo@conseque.ca</td>
                                            <td>04/21/1959</td>
                                        </tr>
                                        <tr>
                                            <td>3</td>
                                            <td>Danielle Myers</td>
                                            <td class="hidden-phone">Bentonville</td>
                                            <td class="hidden-tablet hidden-phone">nunc.sed@liberoInteger.ca</td>
                                            <td>12/11/1971</td>
                                        </tr>
                                        <tr>
                                    </tbody>
                                </table>
                            </div>
                            <!-- // Table in well-black --> 
                            
                        </div>
                        <!-- // Column -->  
                        
                    </div>
                    <!-- // Example row -->
                    
                    <div class="row-fluid">
                        <div class="span6">
                            <div class="well well-black well-impressed">
                                <table class="table boo-table table-condensed table-bordered table-hover margin-00">
                                    <caption>
                                    Default Table Caption - Title for table <span>Here text in span</span>
                                    </caption>
                                    <thead>
                                        <tr>
                                            <th scope="col">ID</th>
                                            <th scope="col">Name</th>
                                            <th scope="col" class="hidden-phone">City</th>
                                            <th scope="col" class="hidden-tablet hidden-phone">Email</th>
                                            <th scope="col">Date of birth</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td>1</td>
                                            <td>Colin Nixon</td>
                                            <td class="hidden-phone">Long Beach</td>
                                            <td class="hidden-tablet hidden-phone">semper@diamSeddiam.edu</td>
                                            <td>02/10/1986</td>
                                        </tr>
                                        <tr>
                                            <td>2</td>
                                            <td>Naida Bennett</td>
                                            <td class="hidden-phone">Lockport</td>
                                            <td class="hidden-tablet hidden-phone">commodo@conseque.ca</td>
                                            <td>04/21/1959</td>
                                        </tr>
                                        <tr>
                                            <td>3</td>
                                            <td>Danielle Myers</td>
                                            <td class="hidden-phone">Bentonville</td>
                                            <td class="hidden-tablet hidden-phone">nunc.sed@liberoInteger.ca</td>
                                            <td>12/11/1971</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                            <!-- // Table in well-black --> 
                            
                        </div>
                        <!-- // Column -->
                        
                        <div class="span6">
                            <div class="well well-black">
                                <table class="table table-condensed table-content table-light table-hover">
                                    <caption>
                                    Default Table Caption - Title for table <span>Here text in span</span>
                                    </caption>
                                    <thead>
                                        <tr>
                                            <th scope="col">ID</th>
                                            <th scope="col">Name</th>
                                            <th scope="col" class="hidden-phone">City</th>
                                            <th scope="col" class="hidden-tablet hidden-phone">Email</th>
                                            <th scope="col">Date of birth</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td>1</td>
                                            <td>Colin Nixon</td>
                                            <td class="hidden-phone">Long Beach</td>
                                            <td class="hidden-tablet hidden-phone">semper@diamSeddiam.edu</td>
                                            <td>02/10/1986</td>
                                        </tr>
                                        <tr>
                                            <td>2</td>
                                            <td>Naida Bennett</td>
                                            <td class="hidden-phone">Lockport</td>
                                            <td class="hidden-tablet hidden-phone">commodo@conseque.ca</td>
                                            <td>04/21/1959</td>
                                        </tr>
                                        <tr>
                                            <td>3</td>
                                            <td>Danielle Myers</td>
                                            <td class="hidden-phone">Bentonville</td>
                                            <td class="hidden-tablet hidden-phone">nunc.sed@liberoInteger.ca</td>
                                            <td>12/11/1971</td>
                                        </tr>
                                        <tr>
                                    </tbody>
                                </table>
                            </div>
                            <!-- // Table in well-black --> 
                            
                        </div>
                        <!-- // Column -->  
                        
                    </div>
                    <!-- // Example row --> 
                    
                </section>
                <!-- // section table -->

            </div>
            <!-- // page content --> 
            
        </div>
        <!-- // main-content  --> 
        
    </div>
    <!-- // main-container  -->
    
    <footer id="footer-fix">
        <div id="footer-sidebar" class="footer-sidebar">
            <div class="navbar">
                <div class="btn-toolbar"> <a class="btn btn-glyph btn-link" href="javascript:void(0);"><i class="fontello-icon-up-open-1"></i></a> </div>
            </div>
        </div>
        <!-- // footer sidebar -->
        
        <div id="footer-content" class="footer-content">
            <div class="navbar navbar-inverse">
                <div class="navbar-inner">
                    <ul class="nav pull-left">
                        <li class="divider-vertical hidden-phone"></li>
                        <li><a id="btnToggleSidebar" class="btn-glyph fontello-icon-resize-full-2 tip hidden-phone" href="javascript:void(0);" title="show hide sidebar"></a></li>
                        <li class="divider-vertical hidden-phone"></li>
                        <li><a id="btnChangeSidebar" class="btn-glyph fontello-icon-login tip hidden-phone" href="javascript:void(0);" title="change sidebar position"></a></li>
                        <li class="divider-vertical"></li>
                        <li><a id="btnChangeSidebarColor" class="btn-glyph fontello-icon-palette tip" href="javascript:void(0);" title="change sidebar color"></a></li>
                        <li class="divider-vertical"></li>
                        <li><a class="btn-glyph fontello-icon-cw" href="javascript:void(0);"></a></li>
                        <li class="divider-vertical"></li>
                        <li><a class="fontello-icon-home-3" href="dashboard-one.html"></a></li>
                        <li class="divider-vertical"></li>
                    </ul>
                    <ul class="nav pull-right">
                        <li class="divider-vertical"></li>
                        <li><a class="btn-glyph fontello-icon-help-2 tip" href="javascript:void(0);" title="help to page"></a></li>
                        <li class="divider-vertical"></li>
                        <li><a class="btn-glyph fontello-icon-cog-4 tip" href="javascript:void(0);" title="settings app"></a></li>
                        <li class="divider-vertical"></li>
                        <li><a id="btnLogout" class="btn-glyph fontello-icon-logout-1 tip" href="javascript:void(0);" title="logout"></a></li>
                        <li class="divider-vertical"></li>
                        <li><a id="btnScrollup" class="scrollup btn-glyph fontello-icon-up-open-1" href="javascript:void(0);"><span class="hidden-phone">Scroll</span></a></li>
                    </ul>
                </div>
            </div>
        </div>
        <!-- // footer content --> 
        
    </footer>
    <!-- // footer-fix  --> 
    
</div>
<!-- // page-container  --> 

<!-- Le javascript --> 
<!-- Placed at the end of the document so the pages load faster --> 
<script src="assets/plugins/bootstrap-wysihtml5/lib/js/wysihtml5-0.3.0.min.js"></script> 
<script src="assets/js/lib/jquery.js"></script> 
<script src="assets/js/lib/jquery-ui.js"></script> 
<script src="assets/js/lib/bootstrap.js"></script> 
<script src="assets/js/lib/jquery.cookie.js"></script> 

<!-- Plugins Bootstrap --> 
<script src="assets/plugins/bootstrap-datepicker/js/bootstrap-datepicker.js"></script> 
<script src="assets/plugins/bootstrap-timepicker/js/bootstrap-timepicker.js"></script> 
<script src="assets/plugins/bootstrap-colorpicker/js/bootstrap-colorpicker.js"></script> 
<script src="assets/plugins/bootstrap-daterangepicker/js/date.js"></script> 
<script src="assets/plugins/bootstrap-daterangepicker/js/bootstrap-daterangepicker.js"></script> 
<script src="assets/plugins/bootstrap-fileupload/js/bootstrap-fileupload.js"></script> 
<script src="assets/plugins/bootstrap-rowlink/js/bootstrap-rowlink.js"></script> 
<script src="assets/plugins/bootstrap-progressbar/js/bootstrap-progressbar.js"></script> 
<script src="assets/plugins/bootstrap-wysihtml5/src/bootstrap-wysihtml5.js"></script> 
<script src="assets/plugins/bootstrap-select/bootstrap-select.js"></script> 
<script src="assets/plugins/bootstrap-bootbox/bootbox.min.js"></script> 
<script src="assets/plugins/bootstrap-modal/js/bootstrap-modalmanager.js"></script> 
<script src="assets/plugins/bootstrap-modal/js/bootstrap-modal.js"></script> 
<script src="assets/plugins/bootstrap-wizard/js/bootstrap-wizard.js"></script> 
<script src="assets/plugins/bootstrap-toggle-buttons/js/bootstrap-toggle-buttons.js"></script> 

<!-- Plugins Custom --> 
<script src="assets/plugins/google-code-prettify/prettify.js"></script> 
<script src="assets/plugins/nicescroll/jquery.nicescroll.min.js"></script> 
<script src="assets/plugins/qtip2/dist/jquery.qtip.min.js"></script> 
<script src="assets/plugins/list/js/list.min.js"></script> 
<script src="assets/plugins/list/plugins/list.paging.min.js"></script> 
<script src="assets/plugins/fullcalendar/fullcalendar.js"></script> 

<!-- Plugins Forms --> 
<script src="assets/plugins/uniform/jquery.uniform.js"></script> 
<script src="assets/plugins/select2/select2.min.js"></script> 
<script src="assets/plugins/counter/jquery.counter.js"></script> 
<script src="assets/plugins/elastic/jquery.elastic.js"></script> 
<script src="assets/plugins/inputmask/jquery.inputmask.js"></script> 
<script src="assets/plugins/inputmask/jquery.inputmask.extensions.js"></script> 
<script src="assets/plugins/validate/js/jquery.validate.min.js"></script> 
<script src="assets/plugins/xbreadcrumbs/xbreadcrumbs.js"></script> 

<!-- Charts --> 
<script src="assets/plugins/sparkline/jquery.sparkline.js"></script> 
<script src="assets/plugins/flot/jquery.flot.js"></script> 
<script src="assets/plugins/flot/jquery.flot.categories.js"></script> 
<script src="assets/plugins/flot/jquery.flot.grow.js"></script> 
<script src="assets/plugins/flot/jquery.flot.orderBars.js"></script> 
<script src="assets/plugins/flot/jquery.flot.pie.js"></script> 
<script src="assets/plugins/flot/jquery.flot.resize.js"></script> 
<script src="assets/plugins/flot/jquery.flot.selection.js"></script> 
<script src="assets/plugins/flot/jquery.flot.stack.js"></script> 
<script src="assets/plugins/flot/jquery.flot.stackpercent.js"></script> 
<script src="assets/plugins/flot/jquery.flot.time.js"></script> 

<!-- Plugins Tables --> 
<script src="assets/plugins/datatables/media/js/jquery.dataTables.js"></script> 
<script src="assets/plugins/datatables/plugin/jquery.dataTables.plugins.js"></script> 
<script src="assets/plugins/datatables/plugin/jquery.dataTables.columnFilter.js"></script> 

<!-- main js --> 
<script src="assets/js/application.js"></script> 

<!-- Only This Demo Page -->
</body>
</html>
